Skip to content

Instantly share code, notes, and snippets.

@sasekazu
Created January 5, 2015 13:36
Show Gist options
  • Save sasekazu/ca74de14c92d48acfe91 to your computer and use it in GitHub Desktop.
Save sasekazu/ca74de14c92d48acfe91 to your computer and use it in GitHub Desktop.
HTML5 canvas 画像処理 二値化
// 二値化
// canvasコンテキスト contextIn を閾値 threshold の元で二値化して contextOut に書き出す
// 入力画像はグレースケール画像であることを想定している(RGB値がすべて同じ)
// アルファ値が 0 のピクセルは閾値に関わらず白にする
function binarization(contextIn, contextOut, width, height, threshold) {
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) {
imgData.data[4*i] = 255;
imgData.data[4*i+1] = 255;
imgData.data[4*i+2] = 255;
imgData.data[4*i+3] = 255;
} else if(imgData.data[4*i]<threshold) {
imgData.data[4*i] = 0;
imgData.data[4*i+1] = 0;
imgData.data[4*i+2] = 0;
imgData.data[4*i+3] = 255;
} else {
imgData.data[4*i] = 255;
imgData.data[4*i+1] = 255;
imgData.data[4*i+2] = 255;
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