HTML5のCanvasを使用して簡単に画像を白黒化する方法。
Javascriptを使用して簡単に白黒化することが可能です。

Canvasの色の扱い方

指定のピクセルの色情報を取り出す方法

Canvasのイメージデータから抜き出す。

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
色情報 = ((画像高さ * 4) * 画像幅) + (x * 4);

色情報について

色情報は1pixelに付きRGB+アルファ値（透過率）となっています。
1pixelに付き4つの情報で構成されているため上記の色情報抜き出しを行うときにX4を行っています。



«前の記事：【PHP】多重クラスの配列化HTML5 Canvasを使ってカメラのモーションセンサーを作成：次の記事»