Chrome 50 で Canvas toBlob() のサポートを追加

キャンバス要素が 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 でリリースされます。