画像の基本操作

目標

• 画像を読み込む方法と、それをWeb上に表示する方法を学ぶ。

画像を読み込む

OpenCV.jsは画像を cv.Mat 型として保存する。HTMLのcanvas要素を用いて cv.Mat をWebへ転送したり、その逆を行ったりする。ImageDataインターフェースは、canvas要素のある領域の基となるピクセルデータを表現したり設定したりできる。

覚え書き

詳細はcanvasのドキュメントを参照のこと。

まず、canvasからImageDataオブジェクトを作成する:

let canvas = document.getElementById(canvasInputId);
let ctx = canvas.getContext('2d');
let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

次に、cv.matFromImageData を使って cv.Mat を構築する:

let src = cv.matFromImageData(imgData);

覚え書き

canvasは連続したストレージを持つ8ビットRGBA画像のみをサポートするため、cv.Mat の型は cv.CV_8UC4 になる。これはネイティブのOpenCVとは異なる。ネイティブの imread や imshow で返される・表示される画像はチャンネルがBGRの順で格納されているためである。

画像を表示する

まず、srcの型を cv.CV_8UC4 に変換する:

let dst = new cv.Mat();
// scale and shift are used to map the data to [0, 255].
src.convertTo(dst, cv.CV_8U, scale, shift);
// *** is GRAY, RGB, or RGBA, according to src.channels() is 1, 3 or 4.
cv.cvtColor(dst, dst, cv.COLOR_***2RGBA);

次に、dstから新しいImageDataオブジェクトを生成する:

let imgData = new ImageData(new Uint8ClampedArray(dst.data), dst.cols, dst.rows);

最後に、それを表示する:

let canvas = document.getElementById(canvasOutputId);
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = imgData.width;
canvas.height = imgData.height;
ctx.putImageData(imgData, 0, 0);

OpenCV.jsでは

OpenCV.jsは上記の方法を用いて画像の読み込みと表示を実装している。

html canvasまたはimg要素から画像を読み込むには cv.imread (imageSource) を使用する。

引数

imageSource

canvas要素またはそのid、もしくはimg要素またはそのid。

戻り値

チャンネルがRGBAの順で格納されたmat。

それを表示するには cv.imshow (canvasSource, mat) を使用する。この関数はmatのビット深度に応じて、matをスケーリングすることがある:

• matが8ビット符号なしの場合、そのまま表示される。
• matが16ビット符号なしまたは32ビット整数の場合、ピクセルは256で除算される。すなわち、値域 [0,255*256] が [0,255] にマッピングされる。
• matが32ビット浮動小数点の場合、ピクセル値は255で乗算される。すなわち、値域 [0,1] が [0,255] にマッピングされる。

引数

canvasSource	canvas要素またはそのid。
mat	表示するmat。

上記の画像の読み込みと表示のコードは、以下のように簡略化できる。

let img = cv.imread(imageSource);
cv.imshow(canvasOutput, img);
img.delete();

試してみる