html5

HTML5 画像を白黒化するJavascript



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

Canvasの色の扱い方


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

Canvasのイメージデータから抜き出す。
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
色情報 = ((画像高さ * 4) * 画像幅) + (x * 4);

色情報について

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



コメントを残す