Use ImageEditor to resize image from code behind

[Rodrigo]

Hi, is it possible to use ImageEditor object to resize an image from code behind?

I'm currently using Syncfusion Uploader to uplade an image, but i'd like after it has been uploaded to resize it to a thumbnail size to save to hard drive. I'm saving both original image and thumbnail in a different file.

Thank you.

[Keerthikaran Venkatachalam]

Hi Rodrigo,

Thank you for reaching out to Syncfusion Support.

We have checked the reported query and prepared a sample to meet your requirements. Using the uploader's change event, we have successfully loaded the image into the ImageEditor component. After the upload, the fileOpened event is triggered, where you can resize the image using the ImageEditor's resize method. To save the image to the local drive, we have implemented an AJAX call in the Save Image button click event, passing the image data to the controller, which then saves the image to a local file. Please refer to the code snippets, samples, and video demonstrations provided below.

[Index.cshtml]

<div>

    @Html.EJS().Uploader("UploadFiles").Selected("onSelected").Render()

</div>

<div class="col-lg-12 control-section e-img-editor-sample">

    @Html.EJS().ImageEditor("image-editor").FileOpened("fileOpened").Render()

</div>

@Html.EJS().Button("save").Content("Save Image").Render()

<script>

    function onSelected(args) {

        var file = args.filesData[0].rawFile;

        var reader = new FileReader();

        reader.onload = function (e) {

            var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');

            imageEditorObj.open(e.target.result);

        };

        reader.readAsDataURL(file);

    }

    function fileOpened(args) {

        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');

        imageEditorObj.resize(300, 300);

    }

    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;

        // Get the 2D rendering context of the canvas

        const context = canvas.getContext('2d');

        // Put the ImageData onto the canvas

        context.putImageData(imageData, 0, 0);

        // Convert the canvas content to a Base64 encoded URL

        var base64Url = canvas.toDataURL();

        $.ajax({

            type: "POST",

            url: "/Home/getImageData",

            data: { imageData: base64Url },

            success: function (data) {

                console.log("success");

            }

        });

    }

</script>

[HomeController.cs]

public void getImageData(string imageData)

{

    string path = @"D:\Download Image\"; // give your folder in the application for storing the image

    var image = imageData.Replace("data:image/png;base64,", "");

    string fileNameWitPath = path + "image.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();

        }

    }

}

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ASP.NET_MVC_Sample704179107.zip

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V