OpenCV JavaScript を使用して画像を表示する
このチュートリアルでは、JavaScript で OpenCV を使用して Web ページに画像を表示する方法について説明します。
OpenCV JavaScript を使用して画像を表示する
JavaScript で OpenCV の imread() 関数を使用して画像を読み取ることができます。 canvas 要素の name、その id または image 要素の name または id を imread() 関数内に渡して、画像を読み取る必要があります。
OpenCV JavaScriptは、cv.Mat 型として画像を保存します。これはn次元配列クラスに属し、double、floatなどの異なるデータ型にデータを保存できます。imread()関数はRGBAチャンネルを含むcv.Mat型の画像を返します。
画像を読み取った後、画像の色空間を変更するなど、任意の画像処理タスクを実行できます。その後、OpenCV の imshow() 関数を使用して Web ページに表示できます。
画像を表示するには、グラフィカル コンテナーが必要です。 HTML の <canvas> タグを使用して、画像を表示するグラフィカル コンテナーを作成できます。
imshow() 関数には 2つの入力引数があります。 1つ目は canvas 要素の name またはその id で、2つ目は Web ページに表示したい画像を含む変数です。
imshow() 内で渡された画像が 8 ビット符号なしの場合は、そのまま表示されます。
イメージが 16 ビット符号なしまたは 32 ビット整数の場合、イメージのピクセルは 256 で除算され、ピクセル値が許容範囲内になるように表示されます。
画像が 32 ビット浮動小数点の場合、ピクセルは 255 倍され、0 ～ 255 の範囲でマッピングされてから画像が表示されます。
画像を表示した後、delete() 関数を使用して画像変数を削除できます。 たとえば、カラー画像を読み取り、グレーに変換して、元の画像と一緒に 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 srcImage = cv.imread(imgElement);
let dstImage = new cv.Mat();
cv.cvtColor(srcImage, dstImage, cv.COLOR_RGBA2GRAY);
cv.imshow('canvasOutputContainer', dstImage);
srcImage.delete();
dstImage.delete();
};
</script>
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
</body>
</html>
出力：
上記のコードでは、OpenCV の cvtColor() 関数を使用して、カラー イメージをグレーに変換しました。
cvtColor() 関数の最初の引数はカラー画像を含む変数で、2 番目の引数は出力画像を格納する変数です。
3 番目の引数は、入力イメージの RGBA カラー スペースをグレーに変換する cv.COLOR_RGBA2GRAY のようなカラー スペースの変換を指定するために使用されます。
上記のコードでは、HTML の onload() 関数を使用しました。この関数は、入力画像を読み込んだときに実行され、その中のコードが実行されて画像が表示されます。
また、ファイルリンクを使用してopencv.jsファイルを.htmlファイルにリンクしました。これには、ファイルを導くためにインターネットが必要ですが、ダウンロードして.htmlにリンクすることもできます。 ファイル。
上記のコードを実行するには、.html ファイルに保存してから、Web ブラウザーでそのファイルを開く必要があります。
