javascriptで画像処理(13)～HDRとクロスプロセスを混ぜたらこんなんなった〜

年末に跳ね上がったアクセス数も順調に落ちてきているjavascriptで画像処理するブログの13回目です。

仕事中にぼんやりとネットしてたらどっかのサイトに「HDR加工した写真にクロスプロセスかけたら凄いことになった」と書いてたので渋谷の写真でやってみたらこんなんなりました

いや、まあぶっちゃけると今回これだけなんですけどね。
そして本当にこれがHDR風で合ってるかどうかも分かりません。
しかしなんか面白い写真が出来たのでw
一応コードを載せるとこんな感じです。
毎度ながらOpenCVjs使ってます。

function HDR_Xpro(imgId, iplImage){

//--------------------HDR処理-------------------------

//白黒濃淡画像にする

var gray = cvCloneImage(iplImage);

cvCvtColor(gray, gray, CV_CODE.RGB2GRAY);

//大きさを半分にする

var miniGray = cvCreateImage(gray.width/2, gray.height/2);

cvResize(gray, miniGray, CV_INTER.CUBIC);

//反転させる 

for(var i = 0 ; i < miniGray.height ; i++){

for(var j = 0 ; j < miniGray.width ; j++){

var v = 255 - miniGray.RGBA[(j + i * miniGray.width) * CHANNELS];

miniGray.RGBA[(j + i * miniGray.width) * CHANNELS] = v;

miniGray.RGBA[1 + (j + i * miniGray.width) * CHANNELS] = v;

miniGray.RGBA[2 + (j + i * miniGray.width) * CHANNELS] = v;

}

}

//スムージング

for(var i = 0 ; i < 3; i++)

cvSmooth(miniGray, miniGray, CV_SMOOTH_TYPE.GAUSSIAN, 7);

//大きさを元に戻す

cvResize(miniGray, gray, CV_INTER.CUBIC);

//原画像をコピー

var newIplImage = cvCloneImage(iplImage);

//オーバレイを３回かける

var blendMode = CV_BLEND_MODE.OVER_LAY;

for(var i = 0 ; i < 3 ; i++)

cvBlendImage(newIplImage, gray, newIplImage, blendMode);

//-----------------------------------------------------------

//-----------------------クロスプロセス---------------------------

var X_PRO_GREEN_TONE_CURVE_UNDER_X = 50;

var X_PRO_GREEN_TONE_CURVE_UNDER_Y = 0;

var X_PRO_GREEN_TONE_CURVE_OVER_X = 200;

var X_PRO_GREEN_TONE_CURVE_OVER_Y = 255;

var X_PRO_RED_TONE_CURVE_UNDER_X = 50;

var X_PRO_RED_TONE_CURVE_UNDER_Y = 0;

var X_PRO_RED_TONE_CURVE_OVER_X = 200;

var X_PRO_RED_TONE_CURVE_OVER_Y = 255;

cvToneCurve(newIplImage, newIplImage,

X_PRO_RED_TONE_CURVE_UNDER_X, X_PRO_RED_TONE_CURVE_UNDER_Y,

X_PRO_RED_TONE_CURVE_OVER_X, X_PRO_RED_TONE_CURVE_OVER_Y, 0);

cvToneCurve(newIplImage, newIplImage,

X_PRO_GREEN_TONE_CURVE_UNDER_X, X_PRO_GREEN_TONE_CURVE_UNDER_Y,

X_PRO_GREEN_TONE_CURVE_OVER_X, X_PRO_GREEN_TONE_CURVE_OVER_Y, 1);

//---------------------------------------------------------------

//表示

cvShowImage(imgId, newIplImage);

}

HDR風とググると色々なサイトでphotoshop等を使った加工の手順が載ってます。
一体どのサイトを参考にしたのか忘れてしまいましたが、とりあえず僕がやってる手順としては次の通りです。

①原画像を白黒化
②画像サイズを縮小
③色を反転
④スムージングでなめらかにする
⑤原画像にオーバーレイで重ねる

②の縮小サイズや④⑤をかける回数を変えれば色々見た目が変わりそうなので適宜調整が必要そうです。
そして実際のところこれではHDRとは呼べない気もしてます。
やっぱりトーンマッピングとか学習が必要ですね。
読むのめんどいんで誰か教えて下さい。

今回の写真ではその後にクロスプロセス風の加工をしてますが、それは前回解説したのでパス！！

最後にもう１枚。

加工前～

加工後～