javascript用OpenCVであるOpenCV.js試してみた
先日OpenCVに関して調べものをしていたところ、
javascriptで動作させることが出来るOpenCV.jsなるものを発見！！
早速使ってみましたので今回はセットアップも含めて備忘録残しておこうと思います。
■OpenCV.jsとは？
OpenCVの公式ページにはこちらの通り説明がありました。
OpenCV.js is a JavaScript binding for selected subset of OpenCV functions for the web platform. It allows emerging web applications with multimedia processing to benefit from the wide variety of vision functions available in OpenCV. OpenCV.js leverages Emscripten to compile OpenCV functions into asm.js or WebAssembly targets, and provides a JavaScript APIs for web application to access them. The future versions of the library will take advantage of acceleration APIs that are available on the Web such as SIMD and multi-threaded execution.
翻訳すると、
OpenCV.jsは、Webプラットフォーム用のOpenCV関数の選択されたサブセット用のJavaScriptバインディングです。これにより、マルチメディア処理を備えた新しいWebアプリケーションは、OpenCVで利用可能なさまざまなビジョン機能の恩恵を受けることができます。OpenCV.jsは、Emscriptenを利用してOpenCV関数をasm.jsまたはWebAssemblyターゲットにコンパイルし、WebアプリケーションがそれらにアクセスするためのJavaScriptAPIを提供します。ライブラリの将来のバージョンでは、SIMDやマルチスレッド実行などのWebで利用可能なアクセラレーションAPIを利用する予定です。
となります。
※参考：OpenCV: Introduction to OpenCV.js and Tutorials
要するに、OpenCV関数をJavascriptでも使用できるようにJavascriptでラッピングしたライブラリということですね。
■OpenCV.js利用環境構築
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ファイルを作成していきます。
コードはこちら。
<!DOCTYPE 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を指定します。
■コード動作させてみる
先ほどのコードを動作させるとこちらのように動作します。
※ファイル選択後の動作になります。
■最後に
今回はjavascriptで動作させるOpenCVである、OpenCV.jsについてご紹介しました。
ブラウザで動作させるのが面白いのでもう少し使ってみたいと思います。
使った感想や使い方は備忘録として残していきたいと思います。
