Open and Save in the ASP.NET CORE Image Editor control

12 Jul 20239 minutes to read

To import an image into the canvas, it must first be converted into a blob object. The Uploader component can be used to facilitate the process of uploading an image from the user interface. Once the image has been uploaded, it can then be converted into a blob and drawn onto the canvas.

To save an edited image in the Image Editor control, use the toBlob method to convert it to a blob object. This will save the image with any annotations or filters that have been applied during the editing process. The saved image can be stored as raw image data or as an image file.

Open

The open method in the Image Editor control offers the capability to open an image by providing it in different formats. This method accepts various types of arguments, such as a base64-encoded string, raw image data, or a hosted/online URL. You can pass either the file name or the actual image data as an argument to the open method, and it will load the specified image into the Image Editor control. This flexibility allows you to work with images from different sources and formats, making it easier to integrate and manipulate images within the Image Editor control.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>

<script>
    function created() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        if (ej.base.Browser.isDevice) {
            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
        } else {
            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        }
    }
</script>

<style>
    .image-editor {
        margin: 0 auto;
    }

    .e-img-editor-sample {
        height: 80vh;
        width: 100%;
    }

    @@media only screen and (max-width: 700px) {
        .e-img-editor-sample {
            height: 75vh;
            width: 100%;
        }
    }

    .control-wrapper {
        height: 100%;
    }
</style>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Supported image formats

The Image Editor control supports three common image formats: PNG, JPEG, and SVG. These formats allow you to work with a wide range of image files within the Image Editor.

When it comes to saving the edited image, the default file type is set as PNG. This means that when you save the edited image without specifying a different file type, it will be saved as a PNG file. However, it’s important to note that the Image Editor typically provides options or methods to specify a different file type if desired. This allows you to save the edited image in formats other than the default PNG, such as JPEG or SVG, based on your specific requirements or preferences.

Save as image

The export method in the Image Editor control enables you to save the modified image as a file on the local device. This method accepts two parameters: the file name and the file type.

By providing a file name, you can specify the desired name for the saved image file. Additionally, you can also specify the file type to determine the format in which the image should be saved. This allows you to save the image according to your specific requirements or preferences, such as PNG, JPEG, or SVG.

By utilizing the export method with the appropriate file name and file type, you can conveniently save the modified image as a file on the local device, ensuring that it is easily accessible and shareable.

In the following example, the export method is used in the button click event.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick" onclick="clickHandler()" cssClass="e-primary" content="Click"></ejs-button>

<script>
    function created() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        if (ej.base.Browser.isDevice) {
            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
        } else {
            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        }
    }

    function clickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imageEditorObj.export("PNG", "Syncfusion"); // File type, file name
    }
</script>

<style>
    .image-editor {
        margin: 0 auto;
    }

    .e-img-editor-sample {
        height: 80vh;
        width: 100%;
    }

    @@media only screen and (max-width: 700px) {
        .e-img-editor-sample {
            height: 75vh;
            width: 100%;
        }
    }

    .control-wrapper {
        height: 100%;
    }
</style>
public ActionResult Default()
{
    List<object> items = new List<object>();
    items.Add(new
    {
        text = "Png"
    });
    items.Add(new
    {
        text = "Jpeg"
    });
    items.Add(new
    {
        text = "Svg"
    });
    ViewBag.datasource = items;
    return View();
}

Output be like the below.

ImageEditor Sample

File opened event

The FileOpened event is triggered in the Image Editor control after an image is successfully loaded. It provides the FileOpenEventArgs as the event argument, which contains two specific arguments:

  • FileName: This argument is a string that contains the file name of the opened image. It represents the name of the file that was selected or provided when loading the image into the Image Editor.

  • FileType: This argument is a string that contains the type of the opened image. It specifies the format or file type of the image that was loaded, such as PNG, JPEG, or SVG.

By accessing these arguments within the FileOpened event handler, you can retrieve information about the loaded image, such as its file name and file type. This can be useful for performing additional actions or implementing logic based on the specific image that was opened in the Image Editor control.

Saving event

The saving event is triggered in the Image Editor control when an image is being saved to the local disk. It provides the SaveEventArgs as the event argument, which includes the following specific arguments:

  • FileName: This argument is a string that holds the file name of the saved image. It represents the name of the file that will be used when saving the image to the local disk.

  • FileType: This argument is a string indicating the type or format of the saved image. It specifies the desired file type in which the image will be saved, such as PNG, JPEG, or SVG.

  • Cancel: This argument is a boolean value that can be set to true in order to cancel the saving action. By default, it is set to false, allowing the saving process to proceed. However, if you want to prevent the saving action from occurring, you can set Cancel to true within the event handler.

By accessing these arguments within the Saving event handler, you can retrieve information about the file name and file type of the image being saved. Additionally, you have the option to cancel the saving action if necessary.

Created event

The created event is triggered once the Image Editor control is created. This event serves as a notification that the component has been fully initialized and is ready to be used. It provides a convenient opportunity to render the Image Editor with a predefined set of initial settings, including the image, annotations, and transformations.

Destroyed event

The destroyed event is triggered once the Image Editor control is destroyed or removed from the application. This event serves as a notification that the component and its associated resources have been successfully cleaned up and are no longer active.

Reset an image

The reset method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image.

By invoking the reset method, any modifications or edits made to the image will be undone, and the image will be restored to its initial state. This allows you to easily discard any changes and begin again with the fresh, unaltered image.