Hi there and thank you very much for the plugin!
In my project, at some point I need to convert data URI to blob.
My problem is I get this error in the console:
"Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."
What I do to get to this error is:
$('body').on('click', '.download-btn', function() { $('body').on('click', '.download-btn', function() { var $imageData = $imageCropper.cropit('export'); });
so now I get the image in base64. The code I get starts with:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CA
so the content type is at the beginning.
To get the blob I do:
function dataURItoBlob(dataURI) { var binary = atob(dataURI); var array = []; for (var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } return new Blob([new Uint8Array(array)], { type: 'image/jpeg' }); } var imageFile = dataURItoBlob($imageData);
then:
window.open(imageFile);
I had to console log the $imageData to see the base64 code.
Tried to find answers online, there are some questions asked about this error, many of them unanswered.
Some agree on the fact that atob() needs the base64 data without the content type appended. I have no clues how to solve this. Do you have any idea?
I attach a screenshot of the console error.
I read a similar issue: https://github.com/scottcheng/cropit/issues/47
As you can see I used the right code to turn dataURI to blob.
I really need blobs in this project, sending too many dataURIs requests is heavy on the server.
Thank you in advance,
Ioana
Hi there and thank you very much for the plugin! In my project, at some point I need to convert data URI to blob. My problem is I get this error in the console: "Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."
What I do to get to this error is:
$('body').on('click', '.download-btn', function() { $('body').on('click', '.download-btn', function() { var $imageData = $imageCropper.cropit('export'); });so now I get the image in base64. The code I get starts with:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAso the content type is at the beginning. To get the blob I do:function dataURItoBlob(dataURI) { var binary = atob(dataURI); var array = []; for (var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } return new Blob([new Uint8Array(array)], { type: 'image/jpeg' }); } var imageFile = dataURItoBlob($imageData);then:window.open(imageFile);I had to console log the $imageData to see the base64 code. Tried to find answers online, there are some questions asked about this error, many of them unanswered. Some agree on the fact that atob() needs the base64 data without the content type appended. I have no clues how to solve this. Do you have any idea? I attach a screenshot of the console error. I read a similar issue: https://github.com/scottcheng/cropit/issues/47 As you can see I used the right code to turn dataURI to blob. I really need blobs in this project, sending too many dataURIs requests is heavy on the server. Thank you in advance, Ioana