Which browsers (and versions) support the Canvas.toBlob method?

user_469319 0
Viewed 19358

I'm working on a minimalist image creation project and I need to have the ability to create images within the browser that are in-turn used on a server. So far, the Canvas.toDataUrl() method has met our needs, but I just learned of the Canvas.toBlob() method which would be much more convenient.

It appears that the toBlob() method is new to the specification by a few months (I can't find any direct reference to when it was added.)

What browsers support toBlob and more importantly which versions of those browsers included the integration of the method? Additionally, is support for this feature "buggy" or in development for any major browsers?

UPDATE

I asked this question nearly 8 year ago. I had tabled my previous mentioned project, waiting for any updates on the status of the canvas.toBlob() method. From what I can gather on the web, implementation of toBlob() appears to be trickling into use across some browsers.

I ask once again, how ubiquitous is the canvas.toBlob() method amongst browsers that have begun integrating the HTML5 canvas object and which versions of those browsers were the first to integrate this support?

html5-canvas html
5 Answers

If you may need it, this js file implement toBlob function in browsers which don't support it already: https://github.com/eligrey/canvas-toBlob.js

Here the post by the authors and here the expanded source code.

However, it looks like even this library doesn't works in all the browsers, as it

"requires BlobBuilder support to function, which is not present in all browsers"

user_13070200

It's been nearly 8 years since I first asked this question. Considering that I still get a trickle-in of upvotes and this question is often at the top of Google Searches, I figured I'd give an update to the state of Canvas.toBlob(...) and it's implementation.

The following table:

                   |             | Version Support 
                   | Version     | for 'Quality'
Browser            | Implemented | Parameter 
-------------------+-------------+-----------------
Android Webview)   |          50 |          50
Chrome (Desktop)   |          50 |          50
Chrome (Mobile)    |          50 | Unsupported 
Edge (Desktop)     | Unsupported | Unsupported 
Edge (Mobile)      | Unsupported | Unsupported 
Firefox (Desktop)  |          19 |          25
Firefox (Mobile)   |           4 |          25
Internet Explorer* |          10 | Unsupported 
Opera (Desktop)    |          37 |         Yes
Opera (Mobile)     |          37 | Unsupported 
Safari (Desktop)   |          11 | Unsupported 
Safari (Mobile)    |          11 | Unsupported 
Samsung Internet   |         5.0 | Unsupported 

* Internet Explore implements "msToBlob" rather than the "toBlob" function signature.

(Source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)

user_4693190
Related