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)の色要素が取得できました。
幅、高さを変えることで矩形領域の画像要素を取得できるようですが、
１次元配列に入っているのがちょっと特殊な感じがします。
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>
クリックした個所を白っぽく変化させてみました。
