HTML5のcanvasを用いて特定座標の色を所得・操作する

canvas APIを用いることによって、Javascriptで画像の操作が容易に行えるようになりました。

例えば、画像の特定の座標にある色を取得、いわゆるスポイトを行ってみたいと思います。

    <canvas id="TestCanvas" width="400" height="300"></canvas>
    <img id="TestImage" src=".\test.png" style="display:none;">

    <script>
        // canvasの取得。
        var canvas = document.getElementById("TestCanvas");
        // 2Dコンテキストの取得。
        var context = canvas.getContext("2d");               
        // 画像の取得。
        var image = document.getElementById("TestImage");

        // 画像の読み込み時に。
        image.onload = function () {

            // 画像を表示。
            context.drawImage(image, 0, 0);

        };

        // 座標(100,100)
        var x = 100;
        var y = 100;

        // 指定座標から幅1,高さ1のImageDataオブジェクトの取得。
        var imagedata = context.getImageData(x, y, 1, 1);

        // RGBAの取得。
        var r = imagedata.data[0];
        var g = imagedata.data[1];
        var b = imagedata.data[2];
        var a = imagedata.data[3];

    </script>

これでひとまず座標(100,100)の色要素が取得できました。
幅、高さを変えることで矩形領域の画像要素を取得できるようですが、

1次元配列に入っているのがちょっと特殊な感じがします。

x,yにはマウスの座標を代入することも出来るので、いよいよスポイトといった具合に!

    <script>
        canvas.onclick = function(evt) {

            // マウス座標の取得。
            var x = parseInt(evt.offsetX);
            var y = parseInt(evt.offsetY);

            // 指定座標のImageDataオブジェクトの取得。
            var imagedata = context.getImageData(x, y, 1, 1);

        }
    </script>

このImageDataオブジェクトは、値を取得するだけでなく、設定することも可能です。

    <script>
        canvas.onclick = function(evt) {

            // マウス座標の取得。
            var x = parseInt(evt.offsetX);
            var y = parseInt(evt.offsetY);

            // 指定座標のImageDataオブジェクトの取得。
            // 1ドットでは分かり辛かったので、幅5,高さ5の矩形領域を対象に。
            var imagedata2 = context.getImageData(x, y, 5, 5);

            for (var i = 0; i < imagedata2.width * imagedata2.height * 4; i += 4) {
                // R,G,Bそれぞれの要素ごとに白(255,255,255)との平均値を計算して上書き。
                imagedata2.data[i + 0] = (255 + imagedata2.data[i + 0]) / 2;    // R
                imagedata2.data[i + 1] = (255 + imagedata2.data[i + 1]) / 2;    // G
                imagedata2.data[i + 2] = (255 + imagedata2.data[i + 2]) / 2;    // B
            }

            // 出力。
            context.putImageData(imagedata2, x, y);

        }
    </script>

クリックした個所を白っぽく変化させてみました。