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を用いてヒストグラムの伸張化を行う方法を見てきました。ヒストグラムの伸張化を利用すると、明るすぎたり暗すぎたりする画像のコントラストを簡単に強くすることができます。

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

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

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

ヒストグラムの作成

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

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

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

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

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

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

 

CanvasとJavascriptで画像処理 – ネガポジ反転

前回は、CanvasとJavascriptを用いて、画像にグレイスケール処理を施す方法についてお伝えしました。今回は、画像のネガポジ反転を行いたいと思います。

ネガポジ反転(階調反転)とは、画像の輝度と色相を反転させる処理のことを指します。フィルム式カメラのネガフィルム上の像がこのネガポジ反転された状態になっています。また、ネガティブな雰囲気を演出するのに使われたりもします。

輝度と色相の反転

輝度と色相の反転は簡単で、元の画像のRGBの各成分を反転させるだけです。

全体のコード

処理に必要なのは輝度と色相の反転だけなので、カラー画像をネガポジ反転させるコードは以下になります。

data配列のRGBをそれぞれ反転した値に直接置き換えています。ネガポジ反転された画像は以下のようになります。

以上のように、CanvasとJavascriptを使うと、カラー画像のネガポジ反転も非常に簡単に行うことができます。次回は、ヒストグラムの均一化についてお伝えします。

CanvasとJavascriptで画像処理 – グレイスケール

前回は、CanvasとJavascriptを用いて画像を白と黒の二階調化する方法についてお伝えしました。今回は、画像のグレイスケール処理を行いたいと思います。

グレイスケールとは、画像の各ピクセルを、その輝度に応じて、白と黒を含む、256段階の灰色に変換する画像処理です。

輝度の計算

輝度は前回と同じ計算式で求めることができます。

灰色のRGBの決定

RGBの各成分が輝度になるよう設定します。

全体のコード

以上を組み合わせると、CanvasとJavascriptでカラー画像をグレイスケール化させるコードは以下になります。

data配列のRGBを計算した輝度に直接置き換えています。その他は二階調化と同じです。グレイスケール処理された画像は以下のようになります。

以上のように、CanvasとJavascriptを使うと、カラー画像に非常に簡単にグレースケール処理を施すことができることが分かります。次回はネガポジ変換についてお伝えします。