哪些浏览器(和版本)支持Canvas.toBlob方法



我正在做一个极简主义的图像创建项目,我需要有能力在浏览器中创建图像,然后在服务器上使用。到目前为止,Canvas.toDataUrl()方法已经满足了我们的需求,但我刚刚了解到Canvas.toBlob()方法更方便。

toBlob()方法似乎是几个月前才加入规范的(我找不到任何关于何时添加的直接参考)

哪些浏览器支持toBlob,更重要的是这些浏览器的哪些版本包含了该方法的集成?另外,对这个特性的支持是"有bug"还是在主流浏览器的开发中?

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

我再问一次,在已经开始集成HTML5画布对象的浏览器中,canvas.toBlob()方法有多普遍?这些浏览器的哪个版本是第一个集成这种支持的?

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

  • Firefox 19
  • 铬50
  • IE10作为前缀msToBlob()

注意这个答案最初写于2011年。原始答案/编辑如下


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

toBlob()于5月12日添加,按定义功能有限。Chrome、firefox和IE9都没有。

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

甚至还没有任何关于将其添加到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的更新,请在这里订阅这个bug:

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

更新:截至2016年2月21日。toblob现在工作在chrome 50(目前金丝雀)

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

这里是作者的帖子,这里是扩展的源代码。

然而,看起来即使这个库也不能在所有的浏览器中工作,因为它

"需要BlobBuilder支持才能运行,这在所有版本中都不存在浏览器"

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

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

距离我第一次问这个问题已经快8年了。考虑到我仍然得到一点点的支持,这个问题经常出现在谷歌搜索的顶部,我想我应该给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)

很遗憾这个特性没有进一步发展,但很高兴知道它的状态(谢谢Simon)。

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

最新更新