Unable to load base64Endoded string into ImageEditor

[Chris Franz]

I am trying to load an image from a database into the ImageEditor control. According to the documentation the Open method should accept a base64Encoded string. However, when I send a string to the open method it adds the base URL to the front of the string. This makes the parameter look like the following which generates a 404 error.

 https://localhost:7241/9j/4AAQSkZJRgABAgEASABIAAD//gASTEVBRFRPT0xTIHYyMi4wAP/bAI...

Here is the code I am using

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created"></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');
       imageEditorObj.open('@(Convert.ToBase64String(Model.MOCPicture))');
    }


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

I have not found any example code that demonstrates loading an image as a base64Encoded string with ASP.NET Core.

I am using version 26.1.3

Thanks,

Chris

[Keerthikaran Venkatachalam]

Hi Chris,

Thank you for reaching out to Syncfusion Support.

We've reviewed your code snippets, and it appears that you are trying to convert a byte array into base64 format and load it into an ImageEditor. To help you achieve these requirements, we've prepared a sample for you. By utilizing an external canvas, you can convert the ImageEditor's image data into base64 format. This base64 image can then be loaded into the ImageEditor, stored on the server, or used for future purposes. Please refer to the code snippet, sample, and video demonstration below for your reference.

[HomeController.cs]

public async Task<IActionResult> Index()

 {

     var model = new ImageModel

     {

         Base64Url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg

    };

    return View(model);

}

  [HttpPost]

  public void setImageData(string imageData)

  {

      SavedBase64 = imageData;

  }

 

  [HttpPost]

  public string getImageData()

  {

      return SavedBase64;

  }

[Index.cshtml]

    function created() {

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

        var base64Url = '@Html.Raw(Model.Base64Url)';// Get the base64 image form the model

        imageEditorObj.open(base64Url);

    }

    document.getElementById('image').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();

        console.log(base64Url);

        $.ajax({

            type: "POST",

            url: "/Home/setImageData",

            data: { imageData: base64Url },

            success: function (data) {

                console.log("success");

            }

        });

    }

    document.getElementById('open').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");

            },

            error: function (error) {

                console.log("error", error);

            }

        });

    }

Note: When loading the base64 image, you need to include the prefix "data:image/png;base64," in the base64 image and then load base64 into ImageEditor. In our method, we have also returned this format only.

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

Regards,

KeerthiKaran K V

Attachment: Sample_194f0952.zip