pythonなどでOpenCVを利用する場合には環境構築がとても面倒なのですが、、、
OpenCV.jsはとても簡単です。
OpenCV.jsをダウンロードし、
javascript利用時に他のjavacriptライブラリと同様にOpenCV.jsを読み込めばOK。
公式では、
①githubで公開されている、
opencv-{VERSION_NUMBER}-docs.zip
をダウンロードする
github.com
②https://docs.opencv.org/3.4.0/opencv.jsといったように、
OpenCV.jsファイル単体をダウンロードする
2つの方法が紹介されておりました。
ただ、、、
①はzipファイルで86MBと大きく、解凍するにも時間を要するので
②の方法が良いかと思います。
※私も②でOpenCV.jsをダウンロードしました。
後は、フロントエンドで用いる場合には、
<script src="opencv.js" type="text/javascript"></script>
として、読み込めばOKです。
■画像データのカラー・グレースケールの切り替えを実現してみる
では、OpenCV.jsで画像データのカラー・グレースケールの切り替えを試してみます。
まずはhtmlファイルを作成していきます。
コードはこちら。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenCV.js sample</title>
</head>
<body>
<h2>OpenCV.js sample code</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<select name="imgType" id="ImgType">
<option value="カラー">カラー</option>
<option value="グレー">グレー</option>
</select>
<div class="inputoutput">
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
</div>
<div class="inputoutput">
<div class="caption">canvasOutput</div>
<canvas id="canvasOutput" ></canvas>
</div>
</div>
</body>
<script src="js/ImgScript.js" type="text/javascript"></script>
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</html>
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
にて指定したファイルを、
<canvas id="canvasOutput" ></canvas>
上に画像を表示し、
<select name="imgType" id="ImgType">
<option value="カラー">カラー</option>
<option value="グレー">グレー</option>
</select>
にて、カラー・グレースケールの切り替えを行るように
OpenCV.jsライブラリを用いたjavascriptを作成していきます。
javascriptのコードはこちら。
let inputElement = document.getElementById('fileInput');
let selectElement = document.getElementById('ImgType');
let filename = "";
inputElement.addEventListener('change', (e) => {
filename = e.target.files[0];
SettingImage();
}, false);
selectElement.addEventListener('change', () => {
if(filename === ""){
}else{
SettingImage();
}
}, false);
SettingImage = () =>{
let imgElement = document.createElement('img');
imgElement.src = URL.createObjectURL(filename);
imgElement.onload = () => {
let dsize = new cv.Size(imgElement.naturalWidth/2, imgElement.naturalHeight/2);
let mat = cv.imread(imgElement);
let dst = new cv.Mat();
cv.resize(mat, dst, dsize, 0, 0, cv.INTER_AREA);
if(selectElement.value === "グレー"){
cv.cvtColor(dst,dst,cv.COLOR_RGB2GRAY);
}
cv.imshow('canvasOutput', dst);
mat.delete();
dst.delete();
}
}
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
まず、OpenCV.jsを利用できるまでの初期化処理に時間を要するため、
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
などにより準備完了をチェックした方が良いです。
OpenCV.jsを用いて画像の表示やカラー・グレースケールへの変換実施している箇所はこちらになります。
SettingImage = () =>{
let imgElement = document.createElement('img');
imgElement.src = URL.createObjectURL(filename);
imgElement.onload = () => {
let dsize = new cv.Size(imgElement.naturalWidth/2, imgElement.naturalHeight/2);
let mat = cv.imread(imgElement);
let dst = new cv.Mat();
cv.resize(mat, dst, dsize, 0, 0, cv.INTER_AREA);
if(selectElement.value === "グレー"){
cv.cvtColor(dst,dst,cv.COLOR_RGB2GRAY);
}
cv.imshow('canvasOutput', dst);
mat.delete();
dst.delete();
}
}
OpenCV.jsにてcv.imreadで画像を読み取る場合、
imgタグを指定する必要があるようです。
このため、あえて
let imgElement = document.createElement('img');
imgElement.src = URL.createObjectURL(filename);
によりimgタグを作成の上、imgタグのsrcに読み込む画像パスを指定します。
後は、pythonやC++、C#と似た感じでimreadでmat型変数に代入の上、
グレースケールに変換する場合には、
cv.cvtColor(dst,dst,cv.COLOR_RGB2GRAY);
で変換すればOK。
最後にimshowでcanvasタグに表示させればOK。
cv.imshow('canvasOutput', dst);imshowの第1引数にcanvasのidを指定します。
■コード動作させてみる
先ほどのコードを動作させるとこちらのように動作します。
※ファイル選択後の動作になります。
