问题描述

我正在进行一个简约的图像创建项目，我需要能够在浏览器中创建一个在服务器上使用的 in-turn 的图像。到目前为止，Canvas.toDataUrl()方法已经满足了我们的需求，但我刚刚了解到 Canvas.toBlob()方法会更加方便。

看来，toBlob()方法在几个月内是新的规范 (我添加时没有找到任何直接引用) 。

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

UPDATE

8 个月前我问了这个问题。我提交了我之前提到的项目，等待有关 canvas.toBlob()方法的状态的任何更新。从我可以在网上收集到的信息，toBlob()的实现似乎在一些浏览器中被使用。

我再次询问，开始集成 HTML5 画布对象的浏览器中的 canvas.toBlob()方法是多么普遍，哪些版本的这些浏览器是第一个集成此支持？

最佳解决思路

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

注意这个答案最初是在 2011 年写的。

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

toBlob()已添加到 May 12th 上，功能有限 as-defined 。它不存在于 Chrome 的夜晚，firefox 每晚，也不是 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(目前为金丝雀)

次佳解决思路

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

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

但是，看起来这个 Library 在所有的浏览器中都不起作用

“requires BlobBuilder support to function, which is not present in all browsers”

第三种解决思路

有一个伟大的 JavaScript 实现的 canvas.toBlob() 函数，还包括本机 FireFox mozGetAsFile() 函数：

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

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。