JavaScriptで画像処理【2】グレースケール化・セピア調

1．はじめに

CANVASの画素を1つずつ操作することが可能になったので、今回から本格的に写真を使った画像処理を行っていきます。CANVASの画素の読み込み方は第1回に記載しております。

2．アルゴリズム

写真のグレースケール化はシンプルで、以下の式で表すことができます。

　　Gray = 0.299 * Red + 0.587 * Green + 0.114 * Blue;

光の3原色をそのまま足して3で割る方法もありますが、上式の輝度成分に基づく各色の重みで足す方が、人間の視覚特性上良いという理由から一般的にこの式が使われます。

セピア調画像は、茶褐色に見えるRGBの重みを元の画像のRGBに掛け合わせることで求めることができます。

3．ソースコード

GrayScale and Sepia

4．実装

元画像

グレースケール化

セピア調

グレースケール化 → セピア調

5．おわりに

グレースケール化は画像処理の中でも簡易な処理となりましたが、この後の2値化やエッジ抽出などで重要な役割を果たします。次回は、トーンカーブに関する画像処理を実装していこうと思います。