【Javascript】ブラウザで画像処理その3『簡単な画像処理をしてみよう!』

【Javascript】ブラウザで画像処理その2『画像データを読み取ろう』の続きです。

本記事では選択された画像に対して実際に画像処理をする方法について紹介を行います。

【Javascript】ブラウザで画像処理その1『ファイルを表示しよう!』

【Javascript】ブラウザで画像処理その2『画像データを読み取ろう!』

スポンサーリンク

画像処理を行う

前回の記事で作った画像処理のトリガーを使用して、実際に画像処理を行います。

グレースケール化

グレースケール化はカラー画像を無彩色のグレースケール画像に変換します。

厳密な計算の仕方とは違いますが、ここでは単純に画素値を(R + G + B) / 3の値として計算します。

ネガポジ反転

ネガポジ反転は各画素の画素値を反転(255から画素値を引く)します。

全ての画素のRGB値に対して、255から画素値を引いた値として反映します。

二値化(閾値手動選択)

二値化は各画素を特定の閾値と比較して明るい場合に白、暗い場合に黒に変換します。

ここでは、閾値の自動選択手法(判別分析法)だと処理が重くなってしまうため、手動(とりあえず127)を閾値として計算を行います。

まとめ

本記事では、ブラウザで選択された画像に対して実際に画像処理をする方法について紹介を行いました。

今回を含めて3回に分けて『ブラウザで画像処理』を行う方法について紹介してきました!

【Javascript】ブラウザで画像処理その1『ファイルを表示しよう!』

【Javascript】ブラウザで画像処理その2『画像データを読み取ろう!』

コメントを残す

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