We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how to append base64 string into imageeditor

 Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': parameter 1 is not of type 'ImageData'.

    at e.open (imged.ej2.min.js:9:1298897)

    at ISpaceManager.5.2.27.01.js:20131:70

    at Object.success (PortalB.5.2.27.01.js:1984:17)

    at l (PortalCommon.5.2.27.01.min.js:1:35761)

    at Object.fireWith [as resolveWith] (PortalCommon.5.2.27.01.min.js:1:36573)

    at p (PortalCommon.5.2.27.01.min.js:1:73297)

    at XMLHttpRequest.<anonymous> (PortalCommon.5.2.27.01.min.js:1:79056)



when i try to append base64 string  getting this kind of error


3 Replies

YA YuvanShankar Arunagiri Syncfusion Team May 2, 2023 12:06 PM UTC

Hi Sanjeevi,


Using the open method of Image Editor component, we can load the base64 string to image editor component shown as below.


UG link: https://ej2.syncfusion.com/javascript/documentation/image-editor/open-save/


document.getElementById('btn2').onclick = function() {

  imageEditorObj.open(base64String);

}


Sample link: https://stackblitz.com/edit/7o9kt1?file=index.js


Get back to us if you need any further assistance on this.


Regards,

YuvanShankar A



CF Chris Franz June 25, 2024 12:37 AM UTC

Looks like this works if the base64String is generated by the component itself. When I try to pass it a base64Encoded string it appends the base URL and gives me a 404 error.


For example:



<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>


Causes a 404 error and shows me this url:  https://localhost:7241/9j/4AAQSkZJRgABAgEASABIAAD//gASTEVBRFRPT0xTIHYyMi4wAP/bAIQABQUFCAUIDAcHDAwJCQkMDQwMDAwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQEFCAgKBwoMBwcMDQwKDA0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0N/8QBogAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoLAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCsc...

How do I specify that I am using a base64Encoded string and not a URL?

The core sample does not show loading an image into the imageEditor from a database. I do not store the images that I want to edit as files.

Thanks,

Chris



KV Keerthikaran Venkatachalam Syncfusion Team June 27, 2024 12:02 PM UTC

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_63a7573d.zip

Loader.
Live Chat Icon For mobile
Up arrow icon