javascriptで画像処理してみよう(8)～instagramのX-proっぽくしてやんよ～

ついに「javascript 画像処理」でググったら３ページ目にヒットするようになりました。

気分が良い間に調子に乗って更新します。

ぶっちゃけるとタイトルはほぼ釣りで、このブログ通りの処理だけではまだinstagramのX-proっぽいというにはおこがましい写真しかできません。

しかしまぁX-proっぽい写真に近づく第一歩にはなってると思います。

とりあえずこんな写真を

こう変える処理です。

毎度なら自作のjavascriptの画像処理ライブラリであるOpenCVjsを使ったソースコードです。

html部は省略しちゃいますが、スクリプト部はこんな感じです。

//imgIdはimgタグ

//iplImageはIplImage型で読み込んだ画像

function Xpro(imgId, iplImage){

//Rのトーンカーブを変更

cvToneCurve(iplImage, iplImage, 50, 0, 200, 255, 0);

//Gのトーンカーブを変更

cvToneCurve(iplImage, iplImage, 50, 0, 200, 255, 1);

//imgタグに画像を転送

cvShowImage(imgId, newIplImage);

}

ぶっちゃけるとRとGのトーンカーブを変えるだけです。

instagramではこの後に四隅に影を付けたり写真を正方形にしたりしてますが、OpenCVjsを使えばその辺りも数行でプログラムが書けます。

今回紹介したXproメソッドはOpenCVjsのサンプルプログラムの「xpro」ボタンで実装されていますので、良かったら色んな写真で試してみて下さい。

次回は写真加工やinstagramに関係ないですがラベリングによる領域分割とか載せようかと思います。