Canvasで描画した画像を送信してサーバに保存する - Qiita

タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。（未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ

[yanbow]

canvas

[baba40]

“var base64= this.canvas.toDataURL('image/png');”

[kathew]

素敵。こういう技術大好き

[takaken1123]

[2016-05-22 23:09]

[lesamoureuses]

"canvas.toBlob()はFirefoxでのみサポートされており、 Firefox以外ではBase64経由でBlobを作成する方法とならざる得ない"

[kjw_junichi]

videoconverter.jsへの入力データを作成する際の参考になりそうだ。