Chrome 50 以降、キャンバス要素がアップグレードされ、toBlob()
メソッドがサポートされるようになりました。これは、クライアントサイドで画像を生成し、サーバーにアップロードしたり、今後使用するために IndexedDB に保存したりしたい人にとって朗報です。
function sendImageToServer (canvas, url) {
function onBlob (blob) {
var request = new XMLHttpRequest();
request.open('POST', url);
request.onload = function (evt) {
// Blob sent to server.
}
request.send(blob);
}
canvas.toBlob(onBlob);
}
toBlob()
を使用すると、toDataURL()
から取得した base64 でエンコードされた文字列を操作する代わりに、エンコードされたバイナリデータを直接操作できるようになりました。サイズも小さく、データ URI よりも多くのユースケースに適合する傾向があります。
別のキャンバス コンテキストに画像 blob を描画できるかどうか知りたい方には、Firefox と Chrome で間違いありません。これを行うには createImageBitmap()
API を使用します。この API も Chrome 50 でリリースされる予定です。