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

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のJavaScript版)

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

 

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

 

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

 

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

 

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

 

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

 

opencv.jsの作り方

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が実行され、

opencvjs_test

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

opencvjs_build

opencv.jsの使い方

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】の記事で詳しく解説しています。

 

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

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

今回はopencv.jsの作り方について解説しました。

 

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

 

OpenCVについてスキルをつけるならUdemyの教材がオススメです。

>> 【Pythonで学ぶ】OpenCVでの画像処理入門

 

Udemyは買い切りの動画学習サービスです。
一度購入してしまえば、その教材はずっと使うことができます。

 

さらに今なら30日間返金保証がついているので、
一度購入して自分の思っていたものと違った場合は費用がかかりません。

 

上記の教材はOpenCVの知識がない人でもゼロから実用的なレベルのOpenCVスキルを習得できます。
その教材の質の高さから1000件近い購入数にも関わらず、4以上の評価を維持しています。

 

また、Pythonについて基礎から学ぶのであれば、オンラインスクールがオススメです。

 

オンラインスクールで学習すると、講義も分かりやすく、
サポート体制もしっかりしているので、これからPythonを学ぶ人にもオススメです。

 

オンラインで無料レッスンを体験することもできるので、
自分にあっているかどうかを確かめることができます。

 

オススメは以下の3つです。
どのスクールも無料体験が用意されているので、
契約前に自分に最適なスクールを探すことができるでしょう。

✔️オススメのプログラミングスクール ベスト3

プログラミングスクールについては「プログラミングスクールで失敗しないためには【オススメベスト3も紹介】」の記事でも紹介しています。

 

気になった方はぜひチェックしてみて下さい〜!

コメント

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