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版)
JavaScriptでOpenCVを使うための準備
JavaScript版OpenCVの使い方
JavaScript版OpenCVで使える関数
JavaScriptでOpenCVを使う際の注意点
1. Mat形式を使う必要がある
2. Matオブジェクトは手動で削除する必要がある
サンプルコード(JavaScriptからOpenCVを使う)
OpenCVやJavaScriptについてもっとスキルをつけるなら
エンジニアとしての自身の価値をチェックする（完全無料）

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

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

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

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

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

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

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

JavaScriptでOpenCVを使うための準備

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

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

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

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

https://github.com/shikaku-mafia/opencvjs

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

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で使える関数を解説します。

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

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

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

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

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(mat, dst, cv.COLOR_RGBA2GRAY, 0);

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

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

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

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

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

この値は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）

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）

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(src, lines, 1, Math.PI / 180, 30, 0, 0, 0, Math.PI);

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

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

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

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

cv.blur（JavaScript版OpenCVの関数その7）

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

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

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

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の機能を使うサンプルコードを載せておきます。

<!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>

このサンプルコードは、

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

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

既にここまでで解説した

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

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

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

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

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

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

リンク

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

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

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

エンジニアとして、

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

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

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

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

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

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

TechClips ME では、

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

▼▼▼▼▼

▲▲▲▲▲

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

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

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

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

JavaScriptでOpenCVを使うための準備

JavaScript版OpenCVの使い方

JavaScript版OpenCVで使える関数

cv.imread（JavaScript版OpenCVの関数 その1）

cv.cvtColor（JavaScript版OpenCVの関数 その2）

cv.imshow（JavaScript版OpenCVの関数 その3）

cv.copyMakeBorder（JavaScript版OpenCVの関数 その4）

cv.Rect（JavaScript版OpenCVの関数 その5）

cv.HoughLines（JavaScript版OpenCVの関数 その6）

cv.blur（JavaScript版OpenCVの関数 その7）