38

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

几个月前，该方法似乎toBlob()对规范来说是新的（我找不到任何直接引用它何时添加的内容。）

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

更新

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

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

4

5 回答 5

36

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

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

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

toBlob()于5 月 12 日添加，按定义具有有限的功能。它不存在于 Chrome nightly、firefox nightly 和 IE9 中。

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

甚至还没有讨论将其添加到 Chrome中。

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

规范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（目前为金丝雀）

于 2011-07-18T16:38:20.947 回答
7

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

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

但是，看起来即使这个库也不适用于所有浏览器，因为它

“需要 BlobBuilder 支持才能运行，这并非在所有浏览器中都存在”

于 2012-04-05T02:27:12.373 回答
7

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

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

于 2013-09-30T17:40:05.903 回答
3

自从我第一次问这个问题以来，已经快 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 ）

于 2019-06-07T18:51:24.070 回答
1

太糟糕了，这个功能没有走得更远，但很高兴知道它的状态（谢谢西蒙）。

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

于 2011-10-22T07:40:28.590 回答