書くネタがどんどん減って困り果てているブログ12回目です。
今回も画像処理のサイトを見て「それ、OpenCVjsでも出来るお！」と言ってやりたいと思います
まぁ正確に言うと「それ、OpenCVjsでも出来るようにしたお！」なのですが。
今回のターゲットサイトはコレ。
複数の画像のサイズをウェブ上で一度に変更してくれるサイトです。
。
。
。
。
それ、OpenCVjsでも出来るお！！！
前回はここでいきなりコードを書いてたのですが、苦労を知ってもらうために前置きも書きますw
これまでOpenCVjsで読み込み処理していたのはcvLoadImageなのですが、これは当然本家のOpenCVにもあるメソッドです。
OpenCVはローカルPCで動くことがメインなC言語系でプログラム書くので、指定したディレクトリ以下にある画像ファイルを一度にforループで読み込ませて処理するとか出来ました。
し・か・し
javascriptはローカルのファイルをプログラム上で自動で読み込ませたりは出来ないようです、たぶん。
そのためOpenCVjsでも複数のファイルを読み込んで処理するにはそれぞれダイアログを開いて選択するということをしないといけませんでした。。。。。
めんどくさいYO！！
そんなわけで新しくcvLoadImagesメソッドを追加したった！！
その名の通り複数の画像を一度に読み込むメソッドです。
ついでに画像サイズを変えるスクリプトも書いておきます。
使い方はこんな感じ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<title>OpenCVjs</title>
<script type="text/javascript" charset="UTF-8" src = "javascript/opencv.js"></script>
<script type="text/javascript" charset="UTF-8">
//ダミー画像の指定
DMY_IMG = "javascript/dmy.jpg";
//複数のIplImageをインスタンス化した配列
//ダミー画像の指定
DMY_IMG = "javascript/dmy.jpg";
//複数のIplImageをインスタンス化した配列
var iplImages = [new IplImage(), new IplImage(), new IplImage()];
//複数のimgタグのidの配列
//複数のimgタグのidの配列
var dispImages = ["dispImage1", "dispImage2", "dispImage3"];
//画像サイズの変更倍率
var ratio = 1.5;
//複数の画像のサイズを変更するメソッド
function Resizes(imgIds, iplImages, ratio){
//画像サイズの変更倍率
var ratio = 1.5;
//複数の画像のサイズを変更するメソッド
function Resizes(imgIds, iplImages, ratio){
try{
for(var i = 0 ; i < imgIds.length ; i++){
var imgId = imgIds[i];
var newIplImage = cvCreateImage(iplImages[i].width * ratio, iplImages[i].height * ratio);
cvResize(iplImages[i], newIplImage, CV_INTER.CUBIC);
cvResize(iplImages[i], newIplImage, CV_INTER.CUBIC);
cvShowImage(imgId, newIplImage);
}
}
}
}
catch(ex){
alert("Reisze : " + ex);
}
}
}
</script>
<body>
<!-- 複数の画像を読み込み -->
<input type="file" id="file1" onClick="cvLoadImagePre(event, 'file1')" onchange="cvLoadImages(event, dispImages, iplImages, 800)" multiple><!-- 複数の画像を読み込み -->
<input type="button" value="resize" onClick="Resizes(dispImages, iplImages, ratio)">
<hr />
<!-- 読み込んだ画像を表示するimgタグ -->
<img id="dispImage1" src=""> <br />
<img id="dispImage2" src=""> <br />
<img id="dispImage3" src="">
基本的には引数が配列になっただけでcvLoadImageと変わりません。
ただ仕事中に急いで作ったんで動作チェックはほとんどやってません！
サイズを変えているcvResizeについてはいずれ解説しますがバイキュービック法でリサイズしている(はず)なので拡大してもそれなりに滑らかです(たぶん)。
</body>
</html>
基本的には引数が配列になっただけでcvLoadImageと変わりません。
ただ仕事中に急いで作ったんで動作チェックはほとんどやってません！
サイズを変えているcvResizeについてはいずれ解説しますがバイキュービック法でリサイズしている(はず)なので拡大してもそれなりに滑らかです(たぶん)。
コードだけじゃつまんないんで一応試した画像を。
一度に読み込んでー
大きさ変更ー
それじゃまたネタができたら…