キャンバス要素が 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 よりも多くのユースケースに適しています。
画像ブロブを別のキャンバス コンテキストに描画できるかどうかについては、Firefox と Chrome では「もちろん」です。これは createImageBitmap()
API を使用して行うことができます。この API も Chrome 50 でリリースされます。