opencv.jsの作法

概要

opencv.jsの作法を調べてみた。

実行環境

sandboxを用意した。以下のコードは動く。
https://s.codepen.io/ohisama/debug/VgVgQV/bYAdyeDvYGYk

画像を読み込む

canvasタグとimgタグを読み込む。
cv.Matクラスで読み込む。
プロパティは、rows,cols,matSize,step,dataを持つ。

	let src = cv.imread('canvasInput');
	let dst = new cv.Mat();
	cv.cvtColor(src, dst, cv.COLOR_RGBA2RGB);
	alert(dst.rows);
	alert(dst.cols);
	alert(dst.matSize);
	alert(dst.step);
	cv.imshow('canvasOutput', dst);
	src.delete();
	dst.delete();

画像を表示

canvasタグに、書き込む。

    cv.imshow('canvasOutput', dst);

画像を生成する。

 	let color = new cv.Scalar(0, 0, 255);
	let dst = new cv.Mat(256, 256, cv.CV_8UC3, color);
	cv.imshow('canvasOutput', dst);
	dst.delete();

線を引く

	let color = new cv.Scalar(255, 255, 255);
	let lcolor = new cv.Scalar(0, 0, 255);
	let start = new cv.Point(0, 0);
	let end = new cv.Point(200, 200);
	let dst = new cv.Mat(256, 256, cv.CV_8UC3, color);
	cv.line(dst, start, end, lcolor, 2, cv.LINE_AA, 0);
	cv.imshow('canvasOutput', dst);
	dst.delete();

四角で塗りつぶす

	let color = new cv.Scalar(255, 255, 255);
	let lcolor = new cv.Scalar(0, 0, 255);
	let p1 = new cv.Point(10, 10);
	let p2 = new cv.Point(200, 200);
	let dst = new cv.Mat(256, 256, cv.CV_8UC3, color);
	cv.rectangle(dst, p1, p2, lcolor, cv.FILLED);
	cv.imshow('canvasOutput', dst);
	dst.delete();

円を塗る

	let color = new cv.Scalar(255, 255, 255);
	let lcolor = new cv.Scalar(255, 0, 0);
	let p1 = new cv.Point(128, 128);
	let dst = new cv.Mat(256, 256, cv.CV_8UC3, color);
	cv.circle(dst, p1, 80, lcolor, cv.FILLED);
	cv.imshow('canvasOutput', dst);
	dst.delete();

以上