Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5 canvas 画像処理 グレースケール化
// グレースケール化
// 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.