哪些浏览器（和版本）支持 Canvas.toBlob 方法？答案

【问题标题】：Which browsers (and versions) support the Canvas.toBlob method?哪些浏览器（和版本）支持 Canvas.toBlob 方法？
【发布时间】：2011-07-18 16:22:02
【问题描述】：

我正在从事一个极简图像创建项目，我需要能够在浏览器中创建图像，然后在服务器上使用这些图像。到目前为止，Canvas.toDataUrl() 方法已经满足了我们的需求，但是我刚刚学习了Canvas.toBlob() 方法，它会更方便。

似乎几个月前toBlob() 方法在规范中是新的（我找不到任何关于何时添加的直接参考。）

哪些浏览器支持toBlob，更重要的是那些浏览器的哪些版本包含了该方法的集成？此外，是否支持此功能“有问题”或正在为任何主要浏览器开发？

更新

我大约 8 年前问过这个问题。我已经提交了我之前提到的项目，等待canvas.toBlob() 方法状态的任何更新。从我在网络上收集到的信息来看，toBlob() 的实现似乎正在逐渐在某些浏览器中使用。

我再次问，canvas.toBlob() 方法在已经开始集成 HTML5 画布对象的浏览器中有多普遍？这些浏览器的哪些版本最先集成了这种支持？

【问题讨论】：

仅供参考，当我第一次问这个问题时，我已经接受了 Simon Sarris 的回答。我为这个问题添加了赏金，因为我认为自 2011 年 7 月以来现在有更好的答案。b
我重新打开了这个问题，因为我不得不暂停这个项目一段时间，并且考虑到大多数现代浏览器几乎每隔一周发布一次更新，当然这个 Javascript 功能的状态必须是与 2011 年 7 月不同。
见caniuse.com/#search=toBlob

标签： html html5-canvas

【解决方案1】：

截至 2016 年 2 月，这些浏览器支持 `toBlob()`

请注意，此答案最初是在 2011 年编写的。原始答案/编辑如下。

toBlob()真的是新的，我不建议在消费者应用程序中使用它，除非你可以明确要求他们使用特定的浏览器（或者控制环境）。

toBlob() 已添加到 May 12th 并且按照定义具有有限的功能。它不存在于 Chrome nightly、firefox nightly 和 IE9 中。

值得注意的是，Firefox 确实有一个功能性的mozGetAsFile

甚至还没有discussion for adding it to Chrome。

Firefox. 的讨论他们决定等到规范更明确后再尝试实施。

toBlob() 的规范非常模糊，许多内部问题仍未解决。他们甚至还不确定典型的toBlob() 使用哪些参数。

2012 年 4 月 10 日更新

toBlob 仍然没有得到支持。它在 Chrome Canary (Nightly)、Firefox Nightly 和 IE9 上仍然不存在。

如果您想在 Chrome 中观看更新，请按以下方式加注：

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

如果您想查看 Firefox 中的更新，请在此处订阅此错误：

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

更新：截至 2016 年 2 月 21 日，.toBlob 现在可在 chrome 50（目前为 canary）中运行

【讨论】：

啊，感谢您的澄清。这个项目的性质是我可以要求一个特定的浏览器，但我宁愿不必限制太多。
这是 9 个月前的原始答案。我不介意将赏金授予此人，但我希望同时有更好的解决方案可用。如果赏金时间到期（在 40 分钟内）。西蒙，将再次得到答案检查，并获得赏金。
现在在 FF 19 中可用 - mozilla.org/en-US/firefox/19.0/releasenotes

【解决方案2】：

如果你可能需要它，这个js文件在不支持它的浏览器中实现toBlob函数：https://github.com/eligrey/canvas-toBlob.js

这里是作者的post 和扩展的源代码here。

然而，看起来即使这个库也不能在所有浏览器中运行，因为它

" 需要 BlobBuilder 支持才能运行，这并不存在于所有浏览器”

【讨论】：

【解决方案3】：

canvas.toBlob() 函数有一个很棒的 JavaScript 实现，还包括原生 FireFox mozGetAsFile() 函数：

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

【讨论】：

你应该提到它是一个Polyfill

【解决方案4】：

距离我第一次提出这个问题已经快 8 年了。考虑到我仍然获得了少量的支持，而且这个问题经常出现在 Google 搜索的顶部，我想我会更新 Canvas.toBlob(...) 的状态及其实现。

下表：

                   |             | 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.

（来源：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob）

【讨论】：

【解决方案5】：

很遗憾，这个功能没有走得更远，但很高兴知道它的状态（谢谢 Simon）。

在此期间，answer 提供了一个很好的解决方法，通过消除 base64 编码 dataUri 字符串的膨胀来实现二进制上传的网络效率。显然，它仅受最新浏览器支持，但如果您正在编写扩展程序或准备获取对前沿浏览器的依赖，这可能是一个不错的选择。

【讨论】：

截至 2016 年 2 月，这些浏览器支持 toBlob()

截至 2016 年 2 月，这些浏览器支持 `toBlob()`