javascriptで画像処理してみよう(2)〜OpenCVjsの解説〜

思ったより見てくれている方がいたようなのでさっそく更新してみました。
instagram様様ですね。

では前回のブログからOpenCVjsの使い方を解説していきます。
解説だけのクソつまんない自己満足ブログとなりますがご了承下さい。
しつこいですがOpenCVjsコードはこちら

コードから重要そうなところだけ抜き出します。

まずはjavascript部

var DMY_IMG = "javascript/dmy.jpg";

var iplImage = new IplImage();

function WhiteBlack(imgId, iplImage){

var newIplImage = cvCloneImage(iplImage);

cvCvtColor(iplImage, newIplImage, CV_CODE.RGB2GRAY);

cvShowImage(imgId, newIplImage);

}

</script>

DMY_IMGは画像を何度か読み込みし直す際に必要なデータで別に何でもいいです。
iplImageは、本家のOpenCVにもある画像型のIplImageをインスタンス化して代入されてる変数です。

WhiteBlackメソッド内で読み込んでいるOpenCVjsのメソッドはどれも本家のOpenCVと同じ機能ですのでどうせ僕が説明してもヘタクソすぎて分からないと思うのでOpenCVの解説サイトを見て下さい。
OpenCVjsのメソッドは本家と同じで全てcv○○というメソッド名になっており、そのままメソッド名をググれば使い方は分かるかと思います。

ここでは、instagram風フィルタをプログラムで作るうえでの肝になる画像の表色系を変えるcvCvtColorメソッドについてだけ書きます。
でも、そもそも表色系ってなんぞ？って人はこのあたりの説明を読むか、美人のウェブデザイナーに声かける口実にでもして教えてもらって下さい。
いずれここでも解説するかもしれませんが。

第1引数が表色系を変える前のIplImage型の画像で、
第2引数が表色系を変えた後のIplImage型の画像が代入されます。
第3引数でどの表色系からどの表色系へ変換するか指定します。
今回はCV_CODE.RGB2GRAYと書いてある通りRGB表色系からGRAY表色系（正確には表色系ではないが）に変換されており、このメソッドで画像が白黒化されてます。

次はhtml部

<input type="button" value="white_black"

onClick="WhiteBlack('dispImage', iplImage)">

はじめのinputタグにふたつのOpenCVjsのメソッドを指定します。

cvLoadImagePreは画像を読み込む事前準備のようなメソッドです。

第2引数はinputタグのidを指定します。

cvLoadImageは本家のOpenCVと同じように画像を読み込むメソッドです。
本家のOpenCVとは色々違いますが、最も違う部分は第4引数で、ここで画像サイズの上限を指定できるようにしてます。

画像の縦幅か横幅が第4引数の数値より大きい場合はアスペクト比を変えない状態で第4引数の大きさに変換してから読み込まれます。
第4引数を指定しない場合は画像サイズ通りに読み込まれます。

以上がOpenCVjsの基本的な使い方です。

長々と説明だけでつまんなかったので一枚フィルタ処理を載せますが、今回説明した白黒フィルタにひとつメソッドを追加するだけで以下のようにコントラストを強めてかっこ良いフィルタができます。

次回はこういうフィルタの作り方を説明しようかと思います。