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

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

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

輝度の計算

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

灰色のRGBの決定

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

全体のコード

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

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

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


“CanvasとJavascriptで画像処理 – グレイスケール” への1件の返信

コメントを残す

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