誰も待ってない画像処理ブログ３回目です。
土曜日でだらだらしてていきなり更新をしなくなるとこでしたが、ここでしないとずっとしなさそうなので頑張ってみました。
前回の予告の通り、ただの白黒写真をこんな感じにかっこ良くする方法を説明します。
その方法とは「トーンカーブをいじること」！！！！！！
このトーンカーブはinstagram風のフィルタをつくる肝のひとつの処理です。
というわけでコードの解説にいきたいところなんですが、トーンカーブの説明から書きます。
トーンカーブとはphotoshopとかgimpに備わってる画像の色調を変える処理のことで、もうちょっと工学的に言うと画素の値を変換する処理です。
ここではgimpのトーンカーブを使って説明します。
いつも通りこの画像を読み込み、
gimpのトーンカーブを開くとこんな感じの画面が出てきます。
横軸が画素を変える前の値で縦軸が画素を変換した後の値を意味します。上の画像の通り左下から右上の直線は何も画素を変えないことを意味してます。
それではトーンカーブの直線の傾きを変えてコントラストを強めてみます。
それはこんな感じで直接の傾きを急にするとできます。
この直線の通り画素のRGBを変換すると画像はこんな感じになります。
暗いところがより暗く、明るいところがより明るくなったことが分かると思います。
次に写真のネガとポジの反転をトーンカーブに書くとこうなります。
画像はこんな感じです。
今回はRGB全てのトーンカーブを変えましたがinstagramのようなフィルタを作る場合は、Rのコントラストだけ変えたり、Gのコントラストだけ変えたりします。
まあこの説明だけじゃ結局何のことかよく分からないと思うんで、あとはgimpなどを使って自分の手でグリグリいじって感覚を掴んでください。
OpenCVjsでトーンカーブを変える方法ですが、本家のOpenCVにはトーンカーブをいじるというメソッドがないためOpenCVjsでは専用メソッドを追加しました。
それが以下のコードの6～８行目にもあるcvToneCurveです。
function WhiteBlack(imgId, iplImage){
var newIplImage = cvCloneImage(iplImage);
cvCvtColor(iplImage, newIplImage, CV_CODE.RGB2GRAY);
cvToneCurve(newIplImage, newIplImage, 50, 0, 150, 255, 0);
cvToneCurve(newIplImage, newIplImage, 50, 0, 150, 255, 1);
cvToneCurve(newIplImage, newIplImage, 50, 0, 150, 255, 2);
cvShowImage(imgId, newIplImage);
}
photoshopやgimpのトーンカーブは曲線もできるんですが、OpenCVjsではそこまでするのは面倒だったので実装されてません。
単純に２点の座標を指定し、その２点を通る直線をトーンカーブとして画素が計算されます。
第１引数は元のIplImage型の画像、第２引数はトーンカーブを変換した後のIplImage型の画像です。
上のコードの場合どっちも同じnewIplImage変数が代入されてます。
第3、第4引数でトーンカーブのひとつめの点のx座標とy座標の位置を指定します。
第5、第6引数でトーンカーブのふたつめの点のx座標とy座標の位置を指定します。
第7引数は後々詳しく説明していきますがRGBどの画素を変換させるか意味し0ならばR、1ならばG、2ならばBとなります。
上のソースコードでは第7引数を0、１、２と変えて３回同じようにcvToneCurveメソッドを呼び出しているのでRGB全ての画素を同じトーンカーブで処理しています。
このメソッドを実行するとこのブログの最初の画像であるこんなのが出来ます。
次回は、前回すっ飛ばした表色系変換の説明をしていこうかと思います。
それでだいたいのinstagramのフィルタっぽいものが再現できるようになると思います。
土曜日でだらだらしてていきなり更新をしなくなるとこでしたが、ここでしないとずっとしなさそうなので頑張ってみました。
前回の予告の通り、ただの白黒写真をこんな感じにかっこ良くする方法を説明します。
その方法とは「トーンカーブをいじること」！！！！！！
このトーンカーブはinstagram風のフィルタをつくる肝のひとつの処理です。
というわけでコードの解説にいきたいところなんですが、トーンカーブの説明から書きます。
トーンカーブとはphotoshopとかgimpに備わってる画像の色調を変える処理のことで、もうちょっと工学的に言うと画素の値を変換する処理です。
ここではgimpのトーンカーブを使って説明します。
いつも通りこの画像を読み込み、
gimpのトーンカーブを開くとこんな感じの画面が出てきます。
横軸が画素を変える前の値で縦軸が画素を変換した後の値を意味します。上の画像の通り左下から右上の直線は何も画素を変えないことを意味してます。
それではトーンカーブの直線の傾きを変えてコントラストを強めてみます。
それはこんな感じで直接の傾きを急にするとできます。
この直線の通り画素のRGBを変換すると画像はこんな感じになります。
暗いところがより暗く、明るいところがより明るくなったことが分かると思います。
次に写真のネガとポジの反転をトーンカーブに書くとこうなります。
画像はこんな感じです。
今回はRGB全てのトーンカーブを変えましたがinstagramのようなフィルタを作る場合は、Rのコントラストだけ変えたり、Gのコントラストだけ変えたりします。
まあこの説明だけじゃ結局何のことかよく分からないと思うんで、あとはgimpなどを使って自分の手でグリグリいじって感覚を掴んでください。
OpenCVjsでトーンカーブを変える方法ですが、本家のOpenCVにはトーンカーブをいじるというメソッドがないためOpenCVjsでは専用メソッドを追加しました。
それが以下のコードの6～８行目にもあるcvToneCurveです。
function WhiteBlack(imgId, iplImage){
var newIplImage = cvCloneImage(iplImage);
cvCvtColor(iplImage, newIplImage, CV_CODE.RGB2GRAY);
cvToneCurve(newIplImage, newIplImage, 50, 0, 150, 255, 0);
cvToneCurve(newIplImage, newIplImage, 50, 0, 150, 255, 1);
cvToneCurve(newIplImage, newIplImage, 50, 0, 150, 255, 2);
cvShowImage(imgId, newIplImage);
}
photoshopやgimpのトーンカーブは曲線もできるんですが、OpenCVjsではそこまでするのは面倒だったので実装されてません。
単純に２点の座標を指定し、その２点を通る直線をトーンカーブとして画素が計算されます。
第１引数は元のIplImage型の画像、第２引数はトーンカーブを変換した後のIplImage型の画像です。
上のコードの場合どっちも同じnewIplImage変数が代入されてます。
第3、第4引数でトーンカーブのひとつめの点のx座標とy座標の位置を指定します。
第5、第6引数でトーンカーブのふたつめの点のx座標とy座標の位置を指定します。
第7引数は後々詳しく説明していきますがRGBどの画素を変換させるか意味し0ならばR、1ならばG、2ならばBとなります。
上のソースコードでは第7引数を0、１、２と変えて３回同じようにcvToneCurveメソッドを呼び出しているのでRGB全ての画素を同じトーンカーブで処理しています。
このメソッドを実行するとこのブログの最初の画像であるこんなのが出来ます。
次回は、前回すっ飛ばした表色系変換の説明をしていこうかと思います。
それでだいたいのinstagramのフィルタっぽいものが再現できるようになると思います。