我正在做一个极简主义的图像创建项目,我需要有能力在浏览器中创建图像,然后在服务器上使用。到目前为止,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字符串的膨胀来实现二进制上传的网络效率。显然,它只支持最新的浏览器,但如果你正在编写扩展或准备依赖于一个前沿的浏览器,它可能是一个不错的选择。