Canvas toBlob is not recognized as a function in Chrome or IE
Currently, toBlob
is only fully supported in Firefox. Internet Explorer has partial support from IE 10, but it is vendor-prefixed to what I assume is msToBlob
. There is however at least one polyfill available.
Here are the relevant issues for Chrome and Safari:
For some reason, the WebKit bug is marked as "RESOLVED WONTFIX".
user1186050
Updated on July 30, 2022Comments
-
user1186050 over 1 year
I'm using Cropper to get the blob for a cropped image. I'm using the latest versions of Chrome and IE, but I'm getting 'canvas.toBlob is not a function' in Chrome and 'Object doesn't support property or method 'toBlob' in IE. Seems like I'm following the doc correctly but I might be missing some library or something. Following the doc here and this thread from SO here
Interestingly enough I can call
var t = $("#imageToCrop").cropper('getCroppedCanvas').toDataURL();
and it works fine to return the data but toBlob doesn't seem to work.
Here is my JS and HTML.
var canvas = document.getElementById("imageToCrop"); canvas.toBlob(function(blob) { var t = blob; });
<div style="width: 500px; height: 500px; display: table; margin: 0 auto;"> <canvas id="imageToCrop" style="border: 1px solid black;" src=""></canvas> </div>
I also tried this below but seeing the same errors
var t = $("#imageToCrop").cropper('getCroppedCanvas').toBlob();