HTML5 canvas 画像処理 二値化

gistfile1.js

// 二値化
// 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);
}