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();

以上