OpenCVをJavaScriptで使うには?【opencv.js】

プログラミング
ゆうすけ
ゆうすけ

OpenCVをJavaScriptで使いたいです。

資格マフィア
資格マフィア

opencv.jsを作れば、JavaScriptでOpenCVが使えるぞ。


✔️ 本記事のテーマ

ゼロからOpenCVをJavaScriptで使う方法(サンプルコード付き)


✔️ 読者さんへの前置きメッセージ

本記事は「JavaScriptでOpenCVを使う方法」について書いています。

 

この記事を読むことで
「opencv.jsの作り方とJavaScriptでの使い方」を理解できます。

 

OpenCVライブラリは画像処理に特化したライブラリです。

 

OpenCVはもともとはPythonライブラリですが、
「opencv.js」を使うことでJavaScriptでもOpenCVを使うことが出来ます。

 

それでは、OpenCVをJavaScriptで使う方を詳しく解説していきましょう。

 

opencv.jsとは?(OpenCVのJavaScript版)

opencv.jsとは?(OpenCVのJavaScript版)

opencv.jsとは、画像処理に特化したライブラリであるOpenCVのJavaScript版です。

 

もともとのOpenCVはPythonのライブラリです。

 

このライブラリをコンパイルしたjsを作ることで、
JavaScriptとしてOpenCVを使うことができるようになります。

 

これにより、jsファイルとブラウザさえあれば画像処理を実現できるので、
面倒な環境設定をせずとも画像処理を行なえるようになりました。

 

今回はそのopencv.jsを使って、画像処理を行う方法について解説していきます。

 

なお、PythonでのOpenCVライブラリの使い方については、
【python】OpenCVの関数一覧と使い方の記事で解説しています。

 

JavaScriptでOpenCVを使うための準備

JavaScriptでOpenCVを使うための準備

OpenCVライブラリをJavaScriptで使うためには、opencv.jsが必要となります。

 

opencv.jsは、Pythonで書かれたOpenCVリポジトリをJavaScript用にコンパイルすることで生成します。

 

ただ、この手順は少し長くなるので、
この記事では既に作ったopencv.js、opencv_js.wasmを使います。

 

以下のリポジトリに作成済みのopencv.js、opencv_js.wasmを置いておきます。


なお、opencv.jsの作り方については
opencv.jsの作り方【サンプル付き】」の記事で紹介しています。

 

JavaScript版OpenCVの使い方

JavaScript版OpenCVの使い方

JavaScriptでOpenCVを使うには、まずopencv.jsを読み込む必要があります。

 

opencv.js と opencv_js.wasm を htmlファイルと同じ階層に置いて、
次のように書くことで、opencv.jsをloadすることが出来ます。

<script src="opencv.jsのpath" type="text/javascript"></script>

 

htmlファイルの中でopencv.jsをloadすることで、
JavaScriptとしてOpenCVライブラリの機能を使用することが出来ます。

 

例えば、OpenCVのグレースケール処理であれば、以下のように書くことが出来ます。

let src= cv.imread(画像PATH);
let dst = new cv.Mat();
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0);

 

基本的には、通常のOpenCVの使い方と同じなので、
PythonでOpenCVライブラリを使ったことがある方であれば、
慣れるのは簡単かもしれません。

 

ただ、微妙な違いなどもあるので、
次にJavaScript版OpenCVで使える関数について紹介していきます。

 

JavaScript版OpenCVで使える関数

JavaScript版OpenCVで使える関数

JavaScript版OpenCVで使える関数を解説します。

 

基本的にはもともとのOpenCVライブラリで使える関数と同じです。

 

以下の関数を使うことができます。

  • cv.imread
  • cv.imshow
  • cv.cvtColor
  • cv.copyMakeBorder
  • src.roi
  • cv.HoughLines
  • cv.blur


簡単にですが、使い方を説明していきましょう。

cv.imread(JavaScript版OpenCVの関数 その1)

cv.imread(JavaScript版OpenCVの関数 その1)

let mat = cv.imread(imgElement);

 

JavaScriptでOpenCVライブラリを使うときもまずは画像を読み込みます。

 

Img要素を引数にしてcv.imread関数で読み込むことで、
後から画像に対して処理を加えることができます。

 

なお、Pythonライブラリのimread関数の使い方については
OpenCVで画像を読み込む方法【Python】」の記事で解説しています

 

cv.cvtColor(JavaScript版OpenCVの関数 その2)

cv.cvtColor(JavaScript版OpenCVの関数 その2)

cv.cvtColor(mat, dst, cv.COLOR_RGBA2GRAY, 0);

 

OpenCVの代表的な処理であるグレーススケールは
JavaScript版OpenCVでも実施することができます。

 

JavaScript版OpenCVではcv.cvtColor関数で実施します。

 

PythonのOpenCVライブラリと同じように、引数でオプションを与えます。

 

第3引数でcv.COLOR_RGBA2GRAYを与えることで、
グレースケール処理をかけることができます。

 

第4引数では、出力画像のチャネル数を指定します。

 

この値は0にしておくと、入力画像と出力画像から自動で算出してくれます。

 

なお、PythonライブラリのcvtColor関数の使い方については
OpenCVでグレースケール画像を簡単に作成する【Python】」の記事で解説してます。

 

cv.imshow(JavaScript版OpenCVの関数 その3)

cv.imshow('canvasOutput', dst);

 

cv.imshow関数で処理を加えた画像を表示します。

 

第1引数にcanvas idを、第2引数には画像を要素を与えることで、
対象の画像をキャンバスに描くことができます。

 

この関数を使うことで、動的に画像を表示させることができるので便利です。

 

cv.copyMakeBorder(JavaScript版OpenCVの関数 その4)

cv.copyMakeBorder(JavaScript版OpenCVの関数 その4)

let s = new cv.Scalar(255, 0, 0, 255);
cv.copyMakeBorder(src, dst, 10, 10, 10, 10, cv.BORDER_CONSTANT, s);

 

JavaScript版OpenCVでは、
copyMakeBorder関数を使うことで、
画像にフォトフレームのような枠をつけることもできます。

 

cv.Rect(JavaScript版OpenCVの関数 その5)

cv.Rect(JavaScript版OpenCVの関数 その5)

let rect = new cv.Rect(100, 100, 200, 200);
dst = src.roi(rect);


OpenCVといえば、矩形抽出などの処理が簡単にかけるのも特徴の一つでしょう。


JavaScript版OpenCVでも矩形抽出は簡単に行うことができます。


ただ、Pythonでの書き方と少し勝手が違います。


JavaScript版OpenCVでは、cv.Rect関数で矩形抽出を定義します。
(let rect = new cv.Rect(100, 100, 200, 200);)


この定義を対象画像に渡すことで、矩形抽出画像を生成することができます。
(dst = src.roi(rect);)


JavaScriptでOpenCVを使うときは、この書き方に慣れておきましょう。

 

なお、PythonライブラリのOpenCVの使い方については
OpenCVで顔を検出する【Python】」の記事で解説してます。

 

cv.HoughLines(JavaScript版OpenCVの関数 その6)

cv.HoughLines(JavaScript版OpenCVの関数 その6)

cv.HoughLines(src, lines, 1, Math.PI / 180, 30, 0, 0, 0, Math.PI);

 

線分検出なども同じように行えます。

 

cv.HoughLines関数を使うことで、画像中から線分を検出することができます。

 

なお、この関数の入力画像は白黒2値画像にしておく必要があります。

 

ここらへんはPythonと同じですね。

 

cv.blur(JavaScript版OpenCVの関数 その7)

cv.HoughLines(JavaScript版OpenCVの関数 その6)

cv.blur(src, dst, ksize, anchor, cv.BORDER_DEFAULT);

 

OpenCVでよく使うぼかし処理も当然、JavaScript版OpenCVでも使えます。

 

cv.blur以外にも、cv.medianBlur、cv.filter2Dなども使えます。

 

JavaScriptでOpenCVを使う際の注意点

JavaScriptでOpenCVを使う際の注意点

opencv.jsを使うことで、
JavaScriptでOpenCVライブラリの機能を使うことができるようになります。

 

ただし、JavaScriptでOpenCVライブラリを使う際には、いくつかの注意点があります。

  • Mat形式を使う必要がある
  • Matオブジェクトは手動で削除する必要がある

 

これらの注意点を押さえておかないと、正しく処理が動かないことがあります。

 

順番に、解説していきましょう。

 

Mat形式を使う必要がある

JavaScriptでOpenCVの処理を行うときは、画像データをMat形式で扱う必要があります

 

例えば、グレースケール変換の処理の場合、
処理の前に変換先の変数をMatクラスで定義します。

// 画像の読み込み
let mat = cv.imread(imgElement);

// 変換先(グレースケール処理をかけた画像)の定義
let dst = new cv.Mat();

// グレースケール処理
cv.cvtColor(mat, dst, cv.COLOR_RGBA2GRAY, 0);

 

このMat形式の定義は、JavaScript特有の処理になるので、忘れないようにしましょう。

 

Matオブジェクトは手動で削除する必要がある

JavaScriptでOpenCVライブラリを使う際には、
以下のように定義したMatオブジェクトを削除する必要があります。

mat.delete();
dst.delete();

 

これは原理的には、EmscriptenがC++オブジェクトのdestructorを自動で呼び出せないことによるものです。

 

ただ、ここら辺はそれほど重要ではないので、難しいことは置いておいて、
「matオブジェクトを定義したら、削除コードを書いておけば良いのだな」
くらいの理解でOKです。

 

サンプルコード(JavaScriptからOpenCVを使う)

サンプルコード(JavaScriptからOpenCVを使う)

最後に、JavaScriptでOpenCVの機能を使うサンプルコードを載せておきます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>OpenCV sample</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
  <div class="inputoutput">
    <img id="imageSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
  </div>
  <br>
  <form name="test">
    <input type="button" value="grayscale" onClick="grayscale()">
    <br>
  </form>
  <br>
  <div class="inputoutput">
    <canvas id="canvasOutput" ></canvas>
    <div class="caption">canvasOutput</div>
  </div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
function grayscale(){
  let mat = cv.imread(imgElement);
  var dst = new cv.Mat();
  cv.cvtColor(mat, dst, cv.COLOR_RGBA2GRAY, 0);
  cv.imshow('canvasOutput', dst);
  mat.delete();
  dst.delete();
}
function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src=".\opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>

 

このサンプルコードは、

  1. 画像を読み込み表示する
  2. 実行ボタンがクリックされると
  3. グレースケールに変換して、その結果を表示する

という動作のプログラムになっています。

 

既にここまでで解説した

  • opencv.jsをloadする方法
  • JavaScriptでOpenCVの関数を使用する方法
  • JavaScriptでOpenCVを使う際の注意点

という部分が入っているコードになっているので、
ご自身でプログラムを作成する際の参考にしてみて下さい。

 

OpenCVやJavaScriptについてもっとスキルをつけるなら

OpenCVやJavaScriptについてもっとスキルをつけるなら

JavaScriptでOpenCVライブラリを使う方法について解説しました。

 

OpenCVはできることがとても多いので、
opencv.jsを使いこなせばブラウザだけで色んな処理を書くことができます。

 

もし、OpenCVについて独学でスキルをつけるなら、以下の書籍がオススメです。

 

この書籍はOpenCVの基礎から応用までを
丁寧にかつ詳細に解説しています。

 

OpenCVのほぼ全てを網羅しているとも言えるほどの徹底ぶりなので、
関数のリファレンスとしても使用することができます。

エンジニアとしての自身の価値をチェックする(完全無料)

エンジニアとして、

自分の価値がどれくらいのものかご存知でしょうか?

 

エンジニアとしてIT業界に身を置いていると

今の会社でずっと働くのか、フリーランスとして独立するのか …

と様々な選択肢があります。

 

どの選択肢が正解なのかを見極めるためにも、選択肢を広げるためにも

自身の価値を知っておくことはとても重要です。

 

TechClips ME では、

職務経歴書をアップロードするだけで企業からのスカウトを受けることができます。

▼▼▼▼▼

▲▲▲▲▲

しかもTechClips MEでは想定年収を企業から提示してくれるので、

自身の価値を数字で分かりやすくたしかめることができます。

 

登録はもちろん完全無料なので、一度登録してみると良いかもしれません。

 

コメント

タイトルとURLをコピーしました