opencv.jsの作り方【サンプル付き】

ゆうすけ

opencv.jsを作って、ブラウザで画像処理したいです。

資格マフィア

opencv.jsを作る手順を解説しよう。

✔️ 本記事のテーマ

opencv.jsを使って、ブラウザだけで画像処理を行う

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

本記事は「opencv.jsの作り方」について書いています。

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

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

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

それでは、opencv.jsの作り方を詳しく解説していきましょう。

opencv.jsとは？
opencv.jsの作り方
opencv.jsの使い方
OpenCVやJSについてもっとスキルをつけるなら
エンジニアとしての自身の価値をチェックする（完全無料）

opencv.jsとは？

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

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

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

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

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

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

opencv.jsの作り方

opencv.jsはやり方さえ把握していれば、すぐに作成することができます。

以下の手順でopencv.jsを作ることができます。

Emscriptenのインストール
OpenCVリポジトリのクローン
OpenCVリポジトリをEmscriptenでコンパイル

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

Emscriptenのインストール

まずは、Emscriptenをインストールします。

EmscriptenはOpenCVライブラリをjsファイルとしてコンパイルする際に使用します。

前準備として、Emscriptenのインストールに必要なものをインストールします。
既にお使いのPCに入っている場合はインストールは不要です。

# gitのインストール
sudo brew install git-core

# Python2.7のインストール
sudo brew install python2.7

# node.jsのインストール
sudo brew install nodejs

# CMakeのインストール
sudo brew install cmake

これで準備が整ったので、
以下のコマンドを実行することでEmscriptenをインストールできます。

# emsdkのリポジトリをclone
git clone https://github.com/juj/emsdk.git

# リポジトリに移動
cd emsdk

# 使用するツールの最新化
git pull

# 最新verをインストール
./emsdk install latest

# active
./emsdk activate latest

# 環境変数の設定
source ./emsdk_env.sh

やっていることは簡単で、

Emscriptenの公式リポジトリを落としてくる
リポジトリに用意されているファイルでインストール〜設定を行う

をしているだけです。

OpenCVリポジトリのクローン

opencv.jsの生成に使用するツールは準備できたので、
次はOpenCVリポジトリを落としてきます。

どこか好きな場所で、以下のコマンドでクローンしてきましょう。

# OpenCVのリポジトリをクローン
git clone https://github.com/opencv/opencv.git

これでopencv.jsを作るためのツールと素材が準備できました。

OpenCVリポジトリをEmscriptenでコンパイル

ここまでで準備が整ったので、実際にコンパイルしていきましょう。

このコンパイルの結果としてopencv.jsが出力されます。

コンパイル作業自体は簡単で、
「OpenCVリポジトリのクローン」の作業を行なったフォルダで以下のコマンドを実行します。

# リポジトリに移動
cd opencv

# コンパイルの実行
python ./platforms/js/build_js.py build_js　--emscripten /XXX/emsdk/emscripten/1.38.4

ただし、XXXの部分は自身の環境に合わせて、置き換える必要があります。

基本的には「Emscriptenのインストール」で「# emsdkのリポジトリをclone」を行なったフォルダPATHに置き換えればOKです。

ちなみにこのオプションを正しく指定しないと、
コンパイル作業の中でemccの場所を見つけることが出来ずにエラーが発生します。

コンパイル結果

コンパイルが成功すると以下のように、opencv.jsが作られたPATHが表示されます。

OpenCV.js location: ~/ws_openCV/opencv/build_js/bin/opencv.js

なお、コマンドの実行には3分ほどかかります。気長に待ちましょう。

途中で以下のようにtestが実行され、

以下のようにビルドが実行されます。

opencv.jsの使い方

opencv.jsは作ってしまえば、使うのは簡単です。

JavaScriptの中でloadすることで、ライブラリとして使うことができます。

参考として、サンプルコードは以下のようになります。

<!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を読み込んで、グレースケール変換を行っています。

なお、opencv.jsの使い方や使える関数については「OpenCVをJavaScriptで使うには？【opencv.js】」の記事で詳しく解説しています。