OpenCV JavaScript の紹介
このチュートリアルでは、OpenCV の opencv.js バインディングを使用して JavaScript で OpenCV について説明します。
OpenCV JavaScript の紹介
OpenCV は、画像処理およびコンピューター ビジョン アプリケーションで使用されています。 OpenCV は、コンピューター ビジョン アプリケーションの構築に使用できる Python、Java、C++ などの多くのプログラミング言語をサポートしています。
Web 開発では、OpenCV の opencv.js バインディングを使用して、コンピューター ビジョンと画像処理アプリケーションで Web サイトを構築できます。 さらに、JavaScript で OpenCV を使用して、マルチメディア処理アプリケーション用の Web サイトを構築できます。
OpenCV のビジョン関数のように、Web 開発に OpenCV 関数のサブセットを使用できます。 ただし、Web ページで OpenCV 関数を使用するには、HTML の <script> タグを使用して opencv.js バインディングを Web ページにリンクする必要があります。
ファイルのアドレスをリンクすることも、ダウンロードしてから .html ファイルにリンクすることもできます。
.html ファイル内のファイルのアドレスをリンクすると、.html ファイルを実行するたびにインターネットにファイルをロードする必要があります。 ただし、opencv.js ファイルをダウンロードして .html ファイルとリンクすると、ファイルをリードするためにインターネットは必要ありません。
たとえば、次のコード行を使用して、.html ファイル内の <script> タグを使用して、ファイルのアドレスを使用して opencv.js ファイルをリンクできます。 以下のコードを参照してください。
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
上記のコードでは、リンク アドレスに OpenCV のバージョン番号も表示されます。これは、使用するバージョンに応じて変更できます。 最後に、Web ページに画像を表示するには、グラフィカル コンテナーを使用する必要があります。
HTML の <canvas> タグを使用できます。これは、OpenCV の imshow() 関数を使用して画像を表示するためのグラフィカル コンテナーです。 canvas コンテナの id と、imshow() 関数内の imread() 関数で読み取った画像を渡して表示する必要があります。
たとえば、HTML を使用して簡単な Web ページを作成し、OpenCV の imread() および imshow() 関数を使用して、Web ページ上の画像を読み取り、表示してみましょう。 以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Introduction to OpenCV JavaScript</title>
</head>
<body>
<h2>Introduction to OpenCV JavaScript</h2>
<div>
<div class="inputoutputDiv">
<img id="SourceImage" alt="" />
<div class="caption">imagesrc <input type="file" id="InputfileName" name="file" /></div>
</div>
<div class="inputoutputDiv">
<canvas id="canvasOutputContainer"></canvas>
<div class="caption">canvasOutputContainer</div>
</div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('SourceImage');
let inputElement = document.getElementById('InputfileName');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function () {
let mat = cv.imread(imgElement);
cv.imshow('canvasOutputContainer', mat);
mat.delete();
};
</script>
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
</body>
</html>
出力：
上記のコードを実行するには、.html ファイルに保存し、Web ブラウザーで開く必要があります。
上記のコードで onload() 関数を使用しました。この関数は、入力画像をロードするときに実行されます。この関数内では、OpenCV を使用して画像を読み取り、表示しました。
