6. コード解説
canvasへの画像の取り込み(jQuery)
var img = $(‘#image’);
var cvs = $(‘#canvas’);
var ctx = cvs. getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img,height);
7. コード解説
色情報の取得
var imgData = ctx. getImageData(0, 0, 360, 480);
var dotList = imgData.data;
• imgData.dataの中は全てのピクセルのデー
ターの配列
• 1つのピクセルに4つの数値(r,g,b,a)
8. コード解説
色情報の編集(例:グレースケール)
for (var i = 0; i < img.data.length; i += 4) {
var r = img.data[i];
var g = img.data[i + 1];
var b = img.data[i + 2];
var gray = (r + g + b) / 3 ;
img.data[i] = gray;
img.data[i + 1] = gray;
img.data[i + 2] = gray;
}
ctx.putImageData(img, 0, 0);