How to load and save an image in ASP.NET Core ImageEditor using AJAX?

This article demonstrates how to load and save images in the Syncfusion ASP.NET Core Image Editor component using AJAX calls in an ASP.NET Core application.

Loading an Image into the ImageEditor

To load an image into the ImageEditor, you can use an AJAX API call to fetch the image data from the server. The following example shows how to set up the ImageEditor and load an image using a button click event.

Setting up the ImageEditor and Load Button

<!-- Load Image Button -->
<ejs-button id="load" cssClass='e-primary' content="Load Image"></ejs-button>

<!-- ImageEditor Component -->
<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created"></ejs-imageeditor>
</div>

AJAX Call to Load Image

<script>
    document.getElementById('load').onclick = function () {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        $.ajax({
            type: "POST",
            url: "/Home/getImageData",
            success: function (data) {
                imageEditorObj.open(data);
                console.log("success");
            }
        });
    }
</script>

Server-side Method to Provide Image Data

[HomeController.cs]

public string getImageData()
{
    // Replace with the actual image URL or base64 string
    var imageData = "https://example.com/image.jpg";
    return imageData;
}

Saving an Image from the ImageEditor

To save an image from the ImageEditor to the server, you can capture the image data and send it to the server using an AJAX POST request.

Setting up the Save Button

<!-- Save Image Button -->
<ejs-button id="save" cssClass='e-primary' content="Save Image"></ejs-button>

<!-- ImageEditor Component -->
<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created"></ejs-imageeditor>
</div>

AJAX Call to Save Image

<script>
    document.getElementById('save').onclick = function () {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var imageData = imageEditorObj.getImageData();
        const canvas = document.createElement('canvas');
        canvas.width = imageData.width;
        canvas.height = imageData.height;
        const context = canvas.getContext('2d');
        context.putImageData(imageData, 0, 0);
        var base64Url = canvas.toDataURL();
        $.ajax({
            type: "POST",
            url: "/Home/saveImageData",
            data: { imageData: base64Url },
            success: function (data) {
                console.log("success");
            }
        });
    }
</script>

Server-side Method to Save Image Data

[HomeController.cs]
[HttpPost]
public void saveImageData(string imageData)
{
    string path = @"\wwwroot\images\"; // Specify the folder path for storing images
    var image = imageData.Replace("data:image/png;base64,", "");
    string fileNameWitPath = path + "savedImage.png";
    using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            byte[] data = Convert.FromBase64String(image);
            bw.Write(data);
            bw.Close();
        }
    }
}

Additional References

• Syncfusion ImageEditor Documentation: https://help.syncfusion.com/aspnet-core/image-editor/getting-started
• jQuery AJAX Documentation: https://api.jquery.com/jquery.ajax/
• ASP.NET Core Documentation: https://docs.microsoft.com/en-us/aspnet/core/

Conclusion

I hope you enjoyed learning about how to load and save an image in ASP.NET Core ImageEditor using AJAX.

You can refer to our ASP.NET Core Image Editor page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core Image Editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!