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

Cannot Save Image in the SaveAsBlob

Hi,

I'm trying to work on the new control, so far so good, now once I want to get the image, I'm using the saveAsBlob, 

after debugging it, in the signature-base file, the getBlob is calling 

 return this.getBlob(this.canvasContext.canvas.toDataURL('image/png'));

and the  canvasContext is undefined 


5 Replies 1 reply marked as answer

AM Abdul Mounem October 26, 2022 04:20 AM UTC

Hi,

Any ideas on this issue?



YA YuvanShankar Arunagiri Syncfusion Team October 26, 2022 05:36 AM UTC

Hi Abdul,


We have checked your reported query and for clarification, saveAsBlob method was not for image editor component. its from signature component. Image editor component derived from signature component, so it shows the signature methods to image editor component. we will resolve this type of issue in our upcoming patch release. Now we have prepared the sample based on your requirement. Please refer the below code snippet and sample link. we can achieve your requirement by using the getImageData and putImageData method of the image editor.

[index.js]:

async saveWorkaround() {

    var imageData = this.imgObj.getImageData();

    var canvas = document.createElement('canvas');

    var ctx = canvas.getContext('2d');

    canvas.width = imageData.width;

    canvas.height = imageData.height;

    ctx.putImageData(imageData00);

    var base64Url = canvas.toDataURL();

    console.log(base64Url);

    const blob = await new Promise((resolve=>

      canvas.toBlob((b=> resolve(b))

    );

    const url = URL.createObjectURL(blob);

    window.open(url'_blank');

  }


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


Could you please check the sample and get back to us, if you need any further assistance on this.


Regards, 

YuvanShankar A


Marked as answer

AM Abdul Mounem October 26, 2022 05:41 AM UTC

Thanks a lot for the support, for now I can use the provided example, and later on I will updated base on the new update



YA YuvanShankar Arunagiri Syncfusion Team October 27, 2022 08:39 AM UTC

You are welcome, Abdul. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.


Best Regards,

YuvanShankar A


If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.



YA YuvanShankar Arunagiri Syncfusion Team December 23, 2022 10:32 AM UTC

Abdul, 

We are happy to announce that our Essential Studio 2022 Volume 4 release v20.4.0.38 is now available. As part of this release, we have refreshed the API documentation to include proper native method, property, and event descriptions for the image editor. Please refer to the below API link.


API link: https://ej2.syncfusion.com/documentation/api/image-editor/


Loader.
Live Chat Icon For mobile
Up arrow icon