HTML5 canvas 画像処理 グレースケール化

gistfile1.js

// グレースケール化
// canvasコンテキスト contextIn をグレースケール化して contextOut に書き出す
// ただしアルファ値が 0 のピクセルはそのままにする
function grayScale(contextIn, contextOut, width, height) {
	var imgData = contextIn.getImageData(0, 0, width, height);
	var gray;
	for(var i=0; i<imgData.width*imgData.height; ++i) {
		if(imgData.data[4*i+3]!=0) {
			gray = 0.299*imgData.data[4*i]+0.587*imgData.data[4*i+1]+0.114*imgData.data[4*i+2];
			gray = Math.floor(gray);
			imgData.data[4*i] = gray;
			imgData.data[4*i+1] = gray;
			imgData.data[4*i+2] = gray;
			imgData.data[4*i+3] = 255;
		}
	}
	contextOut.putImageData(imgData, 0, 0);
}