「javascript 画像処理」で検索すると、goooooogleの4番目のoでヒットするようになりました。
やはりjsで画像を扱うライブラリは少ないんだなと実感してます。
今回はcvBlendImageとcvSmoothを使ったソフトフォーカス(別名、軟焦点)加工を紹介します。
実は数ヶ月前にiPhoneのmixiアプリがアップデートしついにmixiアプリでも写真加工機能が実装され、その中に軟焦点フィルタがあったのがきっかけで作り方を調べました。
しかしまぁ能書きは置いといてとりあえずソフトフォーカスとはどんなのかっていうとこんな加工です。
こっちがソフトフォーカス前で
こっちがソフトフォーカス後です。
全体的に「やさしい」とか「やわらかい」とかの形容詞が合う画像になりますが、工学っぽくいうと「差分を減らして全体的に輝度をあげた」ことになります。
こう言った方が画像処理エンジニアらしさを装えるのでぜひ使ってみて下さい。
function SoftFocus(imgId, iplImage){
//前面の画像として読み込んだ原画像をコピー
var frontImage = cvCloneImage(iplImage);
//背面の画像として読み込んだ原画像をコピー
var backImage = cvCloneImage(iplImage);
//背面の画像をガウシアンフィルタでぼかす
cvSmooth(backImage, backImage, CV_SMOOTH_TYPE.GAUSSIAN, 7);
//背面の画像と前面の画像をスクリーンでブレンド
cvBlendImage(backImage, frontImage, frontImage, CV_BLEND_MODE.SCREEN);
//画像を表示
cvShowImage(imgId, frontImage);
}
まず5行目までで原画像を2枚に複製していますが、photoshop慣れしている人にはレイヤーを２つ用意したと言った方が分かり易いかもしれません。
そのうち下のレイヤー(背面の画像)をぼかすためにcvSmoothメソッドを使います。
cvSmoothは第1引数にIplImage型の原画像を指定し、第2引数に指定したIplImage型の画像に処理の結果が代入されます。
第3引数でスムージングに使われるフィルタの種類を指定します。今回は一般的なガウシアンフィルタであるCV_SMOOTH_TYPE.GAUSSIANを指定しました。
第4引数が、第3引数で指定したスムージングで使うフィルタの大きさを意味しており、これが大きいほどスムージングの効果が大きくなります。
ぼかすと言いましたがcvSmoothメソッドは画像をなめらかにするメソッドで画像のノイズを除去する時などに使われれます。
これを強くかけすぎると画像の必要な部分までノイズと判断してなめらかにしていくため、写真としてはぼかしたことになります。
cvSmoothだけだと、ただメガネを外して見えにくくなっただけのような画像になりますが、これに上のレイヤー(前面の画像)をcvBlendImageを使って重ねることでソフトフォーカスの写真加工が実現できます。
cvBlendImageは第1引数にIplImage型の背面の画像、第2引数にIplImage型の前面の画像を指定します。
第3引数にIplImage型の画像を指定しておき、ここに処理の結果が代入されます。
第4引数は画像の重ね方の種類を表しており、今回はスクリーンを意味するCV_BLEND_MODE.SCREENを指定しています。
第4引数を変えるだけで写真のイメージががらっと変わるので色々試してみると面白いかと思います。
次回はそもそもの画像の形式とかピクセルの処理の仕方とかつまんない部分を解説します。
ただ、その当たりが分かるとプログラミング言語に依存せず自分で画像処理のメソッドを作れるようになるので楽しくなると思います。