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

二回にわたって画像のヒストグラムの伸張化処理についてお伝えしています。前回は、画像のヒストグラムを作成する手順について書きました。今回は、そのヒストグラムに対して伸張化処理を施すことで、画像のコントラストを上げる方法についてお伝えしたいと思います。

ヒストグラムの伸張化とは

こちらが、前回使用したサンプル画像とそのヒストグラムになります。

ヒストグラムから輝度が中央に偏っていて、特に230以上は存在していないことが分かります。ヒストグラムの伸張化とは、輝度の最小値が0、最大値が255となるように、ヒストグラムを全体的に横に引き伸ばす(暗い部分をより暗く、明るい部分をより明るくする)方法で、画像のコントラストを強くすることできます。

輝度の変換式

輝度の変換式は、次のように定義できます。

$$ \begin{eqnarray} l’ = 255 \frac{ l – l_{min} }{ l_{max} – l_{min} } \end{eqnarray} $$

\( l’ \)が変換後の輝度、\( l \)が変換前の輝度、\( l_{min} \)と\( l_{max} \)がそれぞれ、変換前の輝度の最小値と最大値になります。

Javascriptでの実装

上の画像に対して、Javascriptを用いてヒストグラムの伸張化処理を行うコードが以下になります。

まず、いつもと同じように、対象の画像をキャンバス上に描画します。

次に、全ての画素を精査し、画像全体の輝度の最小値と最大値を取得します。

次に、取得した輝度の最小値と最大値を使用して、各画素のヒストグラム伸張後の輝度を計算し、その値に基づきRGBの各成分を変換します。

最後に、変換後の画像でキャンバスを更新して完了です。以下が変換後の画像になります。若干ですが、コントラストが強くなっていることが確認できるかと思います。

…分かりにくいですね。暗めの画像だとこのような感じになります。

 

以上、CanvasとJavascriptを用いてヒストグラムの伸張化を行う方法を見てきました。ヒストグラムの伸張化を利用すると、明るすぎたり暗すぎたりする画像のコントラストを簡単に強くすることができます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です