手順
このチュートリアルでは、Webページ内で opencv.js をインクルードして使い始める方法を学ぶ。opencv.js のコピーは、各 リリース の opencv-{VERSION_NUMBER}-docs.zip から取得するか、オンラインドキュメントの "https://docs.opencv.org/{VERSION_NUMBER}/opencv.js" からビルド済みのスクリプトを単にダウンロードして入手できる（例: https://docs.opencv.org/4.5.0/opencv.js。最新ビルドが必要な場合は 4.x を使用する）。また、チュートリアル OpenCV.jsのビルド に従って自分でコピーをビルドすることもできる。
Webページを作成する
まず、画像をアップロードできる単純なWebページを作成しよう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></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);
</script>
</body>
</html>
このWebページを実行するには、上記の内容をコピーしてローカルの index.html ファイルに保存する。実行するには、Webブラウザでそれを開く。
- 覚え書き
- index.html をホストするにはローカルのWebサーバを使う方がよい。
OpenCV.js をインクルードする
<script> タグの src 属性に opencv.js のURLを設定する。
- 覚え書き
- このチュートリアルでは、
opencv.js を index.html と同じフォルダにホストする。オンラインドキュメントにあるビルド済みの opencv.js のURLを使うこともできる。
同期読み込みの例:
<script src="opencv.js" type="text/javascript"></script>
<script> タグの async 属性を使って opencv.js を非同期に読み込むこともできる。opencv.js の準備が完了したときに通知を受け取るには、onload 属性にコールバックを登録できる。
非同期読み込みの例
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
OpenCV.js を使う
opencv.js の準備が完了すると、cv オブジェクトを通じてOpenCVのオブジェクトや関数にアクセスできる。Promise型の cv オブジェクトは await 演算子でアンラップする必要がある。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await を参照のこと。
例えば、cv.imread を使って画像から cv.Mat を作成できる。
- 覚え書き
- 画像の読み込みは非同期なので、cv.Mat の作成は
onload コールバックの中に入れる必要がある。
imgElement.onload = await function() {
cv = (cv instanceof Promise) ? await cv : cv;
let mat = cv.imread(imgElement);
}
多くのOpenCV関数を使って cv.Mat を処理できる。詳細は 画像処理 など他のチュートリアルを参照できる。
このチュートリアルでは、単に cv.Mat を画面に表示する。cv.Mat を表示するには、canvas要素が必要である。
<canvas id="outputCanvas"></canvas>
cv.imshow を使って canvas 上に cv.Mat を表示できる。
cv.imshow("outputCanvas", mat);
すべての手順をまとめると、最終的な index.html は以下のようになる。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</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>
<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);
imgElement.onload = async function() {
cv = (cv instanceof Promise) ? await cv : cv;
let mat = cv.imread(imgElement);
cv.imshow('canvasOutput', mat);
mat.delete();
};
var Module = {
// https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
onRuntimeInitialized() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
};
</script>
<script async src="opencv.js" type="text/javascript"></script>
</body>
</html>
- 覚え書き
- Emscriptenのヒープに確保されたメモリを解放するには、cv.Mat の delete メソッドを呼ぶ必要がある。詳細は Memory management of Emscripten を参照のこと。
試してみる
1.12.0