web-dev-qa-db-ja.com

Canvas.toBlobメソッドをサポートしているブラウザー（およびバージョン）

私はミニマリストのイメージ作成プロジェクトに取り組んでおり、サーバーで今度は使用されるブラウザー内でイメージを作成する機能が必要です。これまでのところ、Canvas.toDataUrl()メソッドは私たちのニーズを満たしていますが、私はCanvas.toBlob()メソッドの方がはるかに便利であることを知りました。

toBlob()メソッドは、仕様から数か月で新しくなったようです（いつ追加されたかへの直接の参照は見つかりません）。

どのブラウザーがtoBlobをサポートしているか、そしてさらに重要なことは、それらのブラウザーのどのバージョンがメソッドの統合を含んでいたか？さらに、この機能のサポートは「バギー」ですか、それとも主要なブラウザの開発中ですか？

[〜＃〜]更新[〜＃〜]

私はこの質問をほぼ8年前に行いました。私は以前に言及したプロジェクトをまとめ、canvas.toBlob()メソッドのステータスの更新を待っていました。私がWebで収集できるものから、toBlob()の実装は、一部のブラウザで使用されるようになっています。

もう一度質問します。HTML5キャンバスオブジェクトの統合を開始したブラウザーの中でcanvas.toBlob()メソッドはどこにあり、どのブラウザーのバージョンがこのサポートを最初に統合したのですか？

htmlhtml5-canvas
36
RLH

私が最初にこの質問をしてから、ほぼ8年になります。私はまだ賛成投票のトリクルインがあり、この質問がGoogle検索の一番上にあることが多いことを考えると、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 ）

2
RLH

2016年2月以降、これらのブラウザはtoBlob()をサポートしています

この回答はもともと2011年に書かれたものであることに注意してください。元の回答/以下の編集。

toBlob()はreally新規であり、特定のブラウザーを使用するよう明示的に要求できない限り、コンシューマーアプリでの使用はお勧めしません（または環境を制御します）。

toBlob()は 5月12日 に追加され、定義どおり機能が制限されています。 Chrome nightly、firefox nightly、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の更新を監視したい場合は、このバグをここでサブスクライブしてください。

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

更新：2016年2月21日現在、.toBlobはchrome 50（現在カナリア））で動作するようになりました

35
Simon Sarris

Canvas.toBlob（）関数のすばらしいJavaScript実装があり、ネイティブのFireFox mozGetAsFile（）関数も含まれています。

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

7
confile

必要に応じて、このjsファイルはtoBlob関数をまだサポートしていないブラウザに実装しています： https://github.com/eligrey/canvas-toBlob.js

ここでは、著者による post および here 拡張ソースコードです。

ただし、このライブラリでさえ、すべてのブラウザで機能するとは限りません。

「機能するためにBlobBuilderサポートが必要です。これはすべてのブラウザに存在するわけではありません。」

7
Saturnix

この機能がそれほど進んでいないのは残念ですが、そのステータスを知るのはいいことです（thx Simon）。

当面は、この answer は、base64でエンコードされたdataUri文字列の膨張を排除することにより、バイナリアップロードのネットワーク効率を達成するための優れた回避策を提供します。明らかにそれは最新のブラウザーでのみサポートされていますが、拡張機能を作成している場合や、最先端のEdgeブラウザーへの依存関係を取得する準備ができている場合は、これは素晴らしいオプションかもしれません。

1
John Lewin