HTML5キャンバスを切り抜く方法｜指定した幅と高さでキャンバスをエクスポートする

HTML5キャンバスを切り抜いて特定のサイズでエクスポートする方法

HTML5のCanvasを、指定した幅と高さに切り抜いて画像として書き出したい場合には、「一時的なキャンバス（temporary canvas）」を作成するのが定番のテクニックです。元のキャンバスから必要な領域だけを一時キャンバスへ描画し、その一時キャンバスに対して toDataURL() メソッドを呼び出すことで、切り抜いた画像データを取得できます。

実装の手順

処理の流れは以下の通りです。

1. getImageData() で元のキャンバスのピクセル情報を取得します。
2. globalCompositeOperation を "destination-over" に設定し、既存の描画内容を壊さずに背景色を塗れるようにします。
3. document.createElement("canvas") で新しい一時キャンバスを作成し、出力したい幅・高さを設定します。
4. drawImage() を使って、元のキャンバスの内容を一時キャンバスに描画します。
5. 最後に一時キャンバスへ toDataURL() を呼び出せば、切り抜き後の画像データが完成します。

サンプルコード

var c = document.getElementsByTagName("canvas");
var ctx = c[0].getContext("2d");
var data = ctx.getImageData(0, 0, c[0].width, c[0].height);
var compositeOperation = ctx.globalCompositeOperation;

// 既存の描画内容の背面に背景色を敷く
globalCompositeOperation = "destination-over";
ctx.fillStyle = "#800000";
ctx.fillRect(0, 0, c[0].width, c[0].height);

// 一時キャンバスを作成し、切り抜き後のサイズを指定
var tempCanvas = document.createElement("canvas"),
    tCtx = tempCanvas.getContext("2d");
tempCanvas.width = 550;
tempCanvas.height = 280;

// 元のキャンバスを一時キャンバスへ描画
tCtx.drawImage(c[0], 0, 0);

コードのポイント

globalCompositeOperation を "destination-over" に変更しているのは、すでに描かれている内容の「裏側」に背景色を敷くためです。これにより、透明部分を含むキャンバスにも #800000 の背景色を違和感なく追加できます。処理後は、退避しておいた元の値（compositeOperation）に戻しておくと安全です。

また、drawImage() を drawImage(元キャンバス, sx, sy, sw, sh, dx, dy, dw, dh) の9引数形式で呼び出せば、元キャンバスの任意の座標・範囲だけを切り取って描画することも可能です。トリミング位置を細かく制御したい場合に便利です。

最後に、一時キャンバスに対して以下のように toDataURL() を実行すると、PNG形式などの画像データとしてエクスポートできます。

var exportedImage = tempCanvas.toDataURL("image/png");