問題描述

我正在進行一個簡約的圖像創建項目，我需要能夠在瀏覽器中創建一個在服務器上使用的 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。