HTML5 Canvasで2つの画像を50:50にブレンドする方法

HTML5 Canvasで2つの画像を50:50にブレンドする方法

2つの画像をブレンドするには、それぞれの画像を50%ずつの割合で合成します。HTML5のCanvas APIを使えば、getImageData()でピクセルデータを取得し、各ピクセルの値を平均化して、putImageData()で結果を描き戻すことで簡単に実現できます。

ブレンドの基本手順

1. 2つの画像とcanvas要素をHTMLに配置します。
2. 1つ目の画像をcanvasに描画し、getImageData()でピクセルデータを取得します。
3. 2つ目の画像をcanvasに描画し、同様にピクセルデータを取得します。
4. 各ピクセルのRGBA値を「1つ目の画像 × 0.5 + 2つ目の画像 × 0.5」で計算します。
5. putImageData()で計算結果をcanvasに描画します。

サンプルコード

<img src="Tutorial1.jpg" id="myImg1">
<img src="Tutorial2.jpg" id="myImg2">

<p>ブレンド画像<br>
<canvas id="canvas"></canvas></p>

<script>
    window.onload = function () {
        var myImg1 = document.getElementById('myImg1');
        var myImg2 = document.getElementById('myImg2');
        var myCanvas = document.getElementById("canvas");
        var ctx = myCanvas.getContext("2d");

        // 幅と高さを取得
        var w = myImg1.width;
        var h = myImg1.height;

        myCanvas.width = w;
        myCanvas.height = h;

        var pixels = 4 * w * h;
        ctx.drawImage(myImg1, 0, 0);

        var image1 = ctx.getImageData(0, 0, w, h);
        var imageData1 = image1.data;
        ctx.drawImage(myImg2, 0, 0);

        var image2 = ctx.getImageData(0, 0, w, h);
        var imageData2 = image2.data;

        while (pixels--) {
            imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
        }
        image1.data = imageData1;
        ctx.putImageData(image1, 0, 0);
    };
</script>

コードのポイント

• getImageData() / putImageData()：canvas上のピクセルデータを取得・書き戻すためのメソッドです。
• 4 × w × h：各ピクセルはRGBA（赤・緑・青・透明度）の4つの値を持つため、ピクセルデータの総数は「幅 × 高さ × 4」となります。
• 0.5ずつの加重平均：各ピクセル値を50%ずつ加算することで、2つの画像が均等にブレンドされます。

なお、getImageData()は同一オリジンポリシーの制限により、別ドメインの画像を扱うとエラーになる場合があります。ブレンドする画像は同一ドメインに配置するか、CORS設定を適切に行ってください。