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

Question

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

Answer 1

There is a great JavaScript implementation of the canvas.toBlob() function with also includes the native FireFox mozGetAsFile() function:

https://github.com/blueimp/JavaScript-Canvas-to-Blob

Answer 2

It's too bad that this feature is not farther along but nice to know its status(thx Simon).

In the interim, this answer provides a great workaround to achieve the network efficiency of binary uploads by eliminating the bloat of base64 encoded dataUri strings. Obviously it's only supported by the latest browsers but if you're writing an extension or ready to pickup a dependency on a bleeding edge browser, it might be a nice option.

Answer 3

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"

Answer 4

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)

Answer 5

As of Feb 2016, these browsers support toBlob()

• Firefox 19
• Chrome 50
• IE10 as the prefixed msToBlob()

Note this answer was originally written in 2011. Original answer/edits below.

---

toBlob() is really new and I would not recommend using it in a consumer app unless you can explicitly ask them to use a particular browser (or else control the environment).

toBlob() Was added on May 12th and is of limited functionality as-defined. It does not exist in the Chrome nightly, firefox nightly, nor IE9.

It is worth noting that Firefox does have a functional mozGetAsFile

There is yet to even be any discussion for adding it to Chrome.

The discussion for Firefox. They have decided to wait until the spec is more clear before they attempt an implementation.

The spec for toBlob() is very vague with a lot of internal questions still unresolved. They aren't even sure what params to allow for typical toBlob() use yet.

---

Update on April 10th, 2012

toBlob still enjoys no support. It still does not exist on Chrome Canary (Nightly), Firefox Nightly, nor IE9.

If you want to watch for updates in Chrome star this:

http://code.google.com/p/chromium/issues/detail?id=67587

If you want to watch for updates in Firefox subscribe to this bug here:

https://bugzilla.mozilla.org/show_bug.cgi?id=648610

Update: As of February 21 2016 .toBlob now works in chrome 50 (currently canary)