私はミニマリストのイメージ作成プロジェクトに取り組んでおり、サーバーで今度は使用されるブラウザー内でイメージを作成する機能が必要です。これまでのところ、Canvas.toDataUrl()
メソッドは私たちのニーズを満たしていますが、私はCanvas.toBlob()
メソッドの方がはるかに便利であることを知りました。
toBlob()
メソッドは、仕様から数か月で新しくなったようです(いつ追加されたかへの直接の参照は見つかりません)。
どのブラウザーがtoBlob
をサポートしているか、そしてさらに重要なことは、それらのブラウザーのどのバージョンがメソッドの統合を含んでいたか?さらに、この機能のサポートは「バギー」ですか、それとも主要なブラウザの開発中ですか?
[〜#〜]更新[〜#〜]
私はこの質問をほぼ8年前に行いました。私は以前に言及したプロジェクトをまとめ、canvas.toBlob()
メソッドのステータスの更新を待っていました。私がWebで収集できるものから、toBlob()
の実装は、一部のブラウザで使用されるようになっています。
もう一度質問します。HTML5キャンバスオブジェクトの統合を開始したブラウザーの中でcanvas.toBlob()
メソッドはどこにあり、どのブラウザーのバージョンがこのサポートを最初に統合したのですか?
私が最初にこの質問をしてから、ほぼ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 )
toBlob()
をサポートしていますmsToBlob()
この回答はもともと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(現在カナリア))で動作するようになりました
Canvas.toBlob()関数のすばらしいJavaScript実装があり、ネイティブのFireFox mozGetAsFile()関数も含まれています。
必要に応じて、このjsファイルはtoBlob関数をまだサポートしていないブラウザに実装しています: https://github.com/eligrey/canvas-toBlob.js
ここでは、著者による post および here 拡張ソースコードです。
ただし、このライブラリでさえ、すべてのブラウザで機能するとは限りません。
「機能するためにBlobBuilderサポートが必要です。これはすべてのブラウザに存在するわけではありません。」
この機能がそれほど進んでいないのは残念ですが、そのステータスを知るのはいいことです(thx Simon)。
当面は、この answer は、base64でエンコードされたdataUri文字列の膨張を排除することにより、バイナリアップロードのネットワーク効率を達成するための優れた回避策を提供します。明らかにそれは最新のブラウザーでのみサポートされていますが、拡張機能を作成している場合や、最先端のEdgeブラウザーへの依存関係を取得する準備ができている場合は、これは素晴らしいオプションかもしれません。