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 よりも多くのユースケースに適合する傾向があります。

別のキャンバス コンテキストに画像 blob を描画できるかどうか知りたい方には、Firefox と Chrome で間違いありません。これを行うには createImageBitmap() API を使用します。この API も Chrome 50 でリリースされる予定です。