Help us understand the problem. What is going on with this article?

opencv.jsの作法

More than 1 year has passed since last update.

概要

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

以上

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away