HTMLCanvasElement.toBlob()

HTMLCanvasElement.toBlob() メソッドは、 キャンバスに含まれる画像を表す Blob オブジェクトを生成します;このファイルは、ユーザーエージェントの裁量によって、ディスクにキャッシュされるか、メモリに保存されます。type が指定されてない場合、画像の type は、 image/png です。生成された画像の解像度は、96dpi です。
image/jpeg 画像と一緒に使用される 3 つ目の引数は、出力の品質を指定します。

構文

void canvas.toBlob(callback, mimeType, qualityArgument);

パラメーター

callback
引数として Blob オブジェクトを受け取るコールバック関数。
mimeType Optional
画像フォーマットを示す DOMString。既定の型は image/png
qualityArgument Optional
要求した type が image/jpeg image/webp だった場合、画像の品質を示す 0 から 1Number。type 引数がそのほかの値だった場合、既定の値が画質に使用される。ほかの引数は無視される。

戻り値

なし。

キャンバスに表示されている画像を取得する

一度キャンバスにコンテンツを描画したら、これを何らかのサポートされている画像フォーマットに変換できます。たとえば、下記のコードスニペットは、ID が "canvas" の <canvas> 要素を取得して、PNG 画像としてコピーしてから、ドキュメントに新しい <img> 要素を追加しています。この画像ソースはキャンバスを使用して生成されたものです。

var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // 無効化されたため、もはや blob を読み取る必要はありません。
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

ここでは、PNG 画像を生成していることに注意してください;toBlob() の呼び出しに 2 つ目のパラメーターを追加した場合、画像の種類を指定できます。たとえば、 JPEG フォーマットの画像を取得できます:

 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality

キャンバスをアイコンに変換する方法(Mozilla のみ)

キャンバスをアイコンに変換するには、-moz-parse を使用します。Windows XP は PNG から ico への変換をサポートしていませんが、代わりに bmp を使用できます。download 属性を設定することで、ダウンロードリンクを生成できます。download 属性の値は、ファイル名として使用される名前です。

var canvas = document.getElementById("canvas");
var d = canvas.width;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

function blobCallback(iconName) {
  return function(b) {
    var a = document.createElement("a");
    a.textContent = "Download";
    document.body.appendChild(a);
    a.style.display = "block";
    a.download = iconName + ".ico";
    a.href = window.URL.createObjectURL(b);
  }
}
canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon', 
              '-moz-parse-options:format=bmp;bpp=32');

OS.File(chrome/add-on コンテクストのみ)で toBlob をディスクに保存する

このテクニックは画像をデスクトップに保存しますが、Web サイトには公開されていない OS API として Firefox chrome コンテクストか add-on コードでのみ役立ちます。

var canvas = document.getElementById("canvas");
var d = canvas.width;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

function blobCallback(iconName) {
  return function(b) {
    var r = new FileReader();
    r.onloadend = function () {
    // r.result contains the ArrayBuffer.
    Cu.import('resource://gre/modules/osfile.jsm');
    var writePath = OS.Path.join(OS.Constants.Path.desktopDir, 
                                 iconName + '.ico');
    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result), 
                                      {tmpPath:writePath + '.tmp'});
    promise.then(
      function() {
        console.log('successfully wrote file');
      },
      function() {
        console.log('failure writing file')
      }
    );
  };
  r.readAsArrayBuffer(b);
  }
}

canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
              '-moz-parse-options:format=bmp;bpp=32');

仕様

仕様 状態 コメント
WHATWG HTML Living Standard
HTMLCanvasElement.toBlob の定義
現行の標準 HTML5 の最新のスナップショットから変更なし。
HTML5.1
HTMLCanvasElement.toBlob の定義
草案 変更なし。
HTML5
HTMLCanvasElement.toBlob の定義
勧告 初期定義を含む WHATWG HTML Living Standard のスナップショット。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 50 19 (19) 10ms 未サポート 未サポート[1]
画質パラメーター 50 25 (25) 未サポート 未サポート 未サポート
機能 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 50 19.0 (19) ? 未サポート ? 50
画質パラメーター 未サポート 50 25.0 (25) ? 未サポート ? 50

[1] WebKit はまだこの機能を実装していません。WebKit bug 71270 を見てください。

ポリフィル

toDataURL に基づいた低パフォーマンスのポリフィルです。

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {

    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i=0; i<len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || 'image/png'} ) );
  }
 });
}

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: YuichiNukiyama
 最終更新者: YuichiNukiyama,