javascript - Canvas toBlob is not recognized as a function in Chrome or IE - Stack Overflow

admin管理员组

文章数量:1315829

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'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();

• javascript
• jquery
• html
• canvas

Share Improve this question Follow edited May 23, 2017 at 12:06 CommunityBot 111 silver badge asked Nov 27, 2015 at 21:25 chuckdchuckd 14.6k3333 gold badges178178 silver badges395395 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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:

• Chromium 67587 (Chrome)
• WebKit 71270 (Safari)

For some reason, the WebKit bug is marked as "RESOLVED WONTFIX".

本文标签： javascriptCanvas toBlob is not recognized as a function in Chrome or IEStack Overflow