CanvasとJavascriptで画像処理 – ヒストグラムの伸張化(1)

前回は、CanvasとJavascriptを用いて、画像にネガポジ反転処理を施す方法についてお伝えしました。今回は、二回にわたって画像のヒストグラムの伸張化についてお伝えしたいと思います。

ヒストグラムとは、画像の輝度がどのように分布しているかを示すグラフで、通常横軸に輝度、縦軸にその輝度を持つ画素の数をとります。ヒストグラムはコントラストの調整等の画像処理に利用することができます。

ヒストグラムの作成

ヒストグラムを作成するには、画像の0から255までの各輝度を持つ画素の数を数え上げます。Javascriptを利用した場合、以下のように行うことができます。

まず、前回までと同様に、画像をキャンバスに読み込みます。

次に、輝度の値をインデックスとする配列を作成し、各要素を0で初期化します。

最後に、getImageDataメソッドにより取得した画像のRGBA配列を利用して、各画素の輝度を計算し(小数点以下は四捨五入しています)、その輝度をインデックスとする要素の値として足し上げます。

このサンプル画像に対し、上記の方法で取得した輝度と度数の組み合わせをプロットすると、以下のようなヒストグラムを出力することができます。

ヒストグラムから輝度が中央に偏っていて、特に230以上は存在していないことが分かります。次回は、この画像に対し、ヒストグラムの伸張化処理を施すことで、コントラストを強める方法について見ていきたいと思います。

 


“CanvasとJavascriptで画像処理 – ヒストグラムの伸張化(1)” への1件の返信

コメントは受け付けていません。