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