OpenCV.js クイックスタートガイド

1 はじめに

OpenCV.js: OpenCV の JavaScript バージョン
公式ガイド: OpenCV.js チュートリアル

2. ダウンロード

以下のリンクから、指定されたバージョンのプリコンパイル済み opencv.js ファイルをダウンロードできます。
```
https://docs.opencv.org/{version}/opencv.js
```
たとえば、バージョン 4.5.5 の opencv.js ファイルをダウンロードします。
```
https://docs.opencv.org/4.5.5/opencv.js
```

3. インストールと使用方法

HTMLスクリプトタグのインポート

<!-- OpenCV.js 4.5.5 版本 -->
<script src='https://docs.opencv.org/4.5.5/opencv.js'></script>

Node.jsを使用する

// 加载 OpenCV.js
function loadOpenCV(path) {
      
      
    return new Promise(resolve => {
      
      
        global.Module = {
      
      
            onRuntimeInitialized: resolve
        };
        global.cv = require(path);
    });
}

// 加载并创建一个图像
async function run(path){
      
      
    await loadOpenCV(path)
    let img = new cv.Mat()
    img.delete()
}

// 设置文件路径
const path = './opencv.js'

// 运行
run(path)

4. データ型

画像データの種類

Mat は OpenCV の基本的な画像データ構造であり、そのデータ型の比較表は次のとおりです。

データのプロパティ	C++ タイプ	JavaScript の型付き配列	マットタイプ
データ	飛ぶ	Uint8Array	CV_8U
日付8S	文字	Int8Array	CV_8S
データ16U	ウーショート	Uint16配列	CV_16U
データ16S	短い	Int16Array	CV_16S
データ32S	整数	int32配列	CV_32S
データ32F	浮く	Float32Array	CV_32F
データ64F	ダブル	Float64配列	CV_64F

MatVector は複数の Mat で構成されるベクトルです。push_back(mat: cv.Mat)、get(index:number)、および set(index:number,mat:cv.Mat) メソッドを使用して、Mat を追加、読み取り、MatVector に設定します
Mat および MatVector タイプの変数については、不要になったときに delete() メソッドを使用して削除してください。そうしないと、変数がメモリを占有し続けます。

作成と削除の簡単な方法は次のとおりです。

// 创建一个 Mat
let mat = new cv.Mat()

// 创建一个 MatVector
let matVector = new cv.MatVector()

// 添加一个 Mat
matVector.push_back(mat)

// 获取 index 为 0 的 Mat 
mat = matVector.get(0)

// 设置 index 为 0 的 Mat 
matVector.set(0, mat)

// 删除 Mat
mat.delete()

// 删除 MatVector
matVector.delete()

他のデータ型とそれに対応する JS オブジェクト形式は、変数を作成するときに両方の方法で使用できます。

// 坐标点
new cv.Point(x, y) = {
      
      
    x: number, 
    y: number
}

// 像素点
new cv.Scalar(R, G, B, Alpha) = [
    R: number, 
    G: number, 
    B: number, 
    Alpha: number
]

// 图像尺寸
new cv.Size(width, height) = {
      
      
    width: number, 
    height: number
}

// 圆形区域
new cv.Circle(center, radius) = {
      
      
    center: {
      
      
        x: number,
        y: number
    }, 
    radius: number
}

// 矩形区域
new cv.Rect(x, y, width, height) = {
      
      
    x: number, 
    y: number, 
    width: number, 
    height: number
}

// 旋转矩形区域
new cv.RotatedRect(center, size, angle) = {
      
      
    center: {
      
      
        x: number,
        y: number
    }, 
    size: {
      
      
        width: number, 
        height: number 
    },
    angle: number
}

5. API

OpenCV.js の API は、OpenCV C++ バージョンの API と非常に似ています。

OpenCV.js の一般的に使用される API は次のとおりです。

画像の読み込みと表示

// 读取
cv.imread(dom) -> dst

// 显示
cv.imshow(dst, dom)

  dom(Dom/string): img 标签或其 id（读取） / canvas 标签或其 id（读取/显示）

  dst(cv.Mat): 图像（RGBA）

イメージを作成する

// 创建一个 Mat 格式的图像
new cv.Mat() -> mat
new cv.Mat(size, type) -> mat
new cv.Mat(rows, cols, type) -> mat
new cv.Mat(rows, cols, type, scalar) -> mat


// 创建一个值全部为零的图像
cv.Mat.zeros(rows, cols, type) -> mat

// 创建一个值全部为一的图像
cv.Mat.ones(rows, cols, type) -> mat

// 创建一个对角线值为一的图像
cv.Mat.eye(rows, cols, type) -> mat

// 使用 JS Array 生成图像
cv.matFromArray(rows, cols, type, array) -> mat

// 使用 canvas ImageData 生成图像
cv.matFromImageData(imgData) - mat

  size(cv.size): 图像尺寸
  rows(number): 图像高度
  cols(number): 图像宽度
  type(number): 图像类型（cv.CV_8UC3 ...）
  scalar(cv.Scalar): 图像初始值
  array(Array): JS 图像数组
  imgData(ImageData): canvas 图像数据

  mat(cv.Mat): 图像（type）

画像のプロパティを取得する

// 图像高度
mat.rows -> rows

// 图像宽度
mat.cols -> cols

// 图像尺寸
mat.size() -> size

// 图像通道数量
mat.channels() -> channels

// 图像数据类型
mat.type() -> type

  mat(cv.Mat): 图像

  rows(number): 图像高度
  cols(number): 图像宽度
  size(cv.Size): 图像尺寸
  channles(number): 图像通道数量
  type(number): 图像数据类型（cv.CV_8UC3 ...）

画像データを取得する

mat.data -> data
mat.data8S -> data8S
mat.data16U -> data16U
mat.data16S -> data16S
mat.data32S -> data32S
mat.data32F -> data32F
mat.data64F -> data64F

  mat(cv.Mat): 图像

  data(Uint8Array): 无符号 8 位整型数据
  data8S(Int8Array): 有符号 8 位整型数据
  data16U(Uint16Array): 无符号 16 位整型数据
  data16S(Int16Array): 有符号 16 位整型数据
  data32S(Int32Array): 有符号 32 位整型数据
  data32F(Float32Array): 32 位浮点数据
  data64F(Float64Array): 64 位浮点数据

クロップ画像

mat.roi(rect) -> matROI

  rect(cv.Rect): 图像裁切区域

  matROI(cv.Mat): 裁切图像

色空間変換

cv.cvtColor(src, dst, code)

  src(cv.Mat): 输入图像
  dst(cv.Mat): 输出图像
  code(number): 转换类型（cv.COLOR_RGBA2RGB ...）

画像のスケーリング

cv.resize(src, dst, dsize, fx, fy, interpolation)

  src(cv.Mat): 输入图像
  dst(cv.Mat): 输出图像
  dsize(cv.Size): 目标尺寸
  fx(number): x 轴缩放因子
  fy(number): y 轴缩放因子
  interpolation(number): 插值类型（cv.INTER_LINEAR ...）

画像ベクトルを作成する

new cv.MatVector() -> matVector

  matVector(cv.MatVector): 图像向量

画像ベクトルの操作

// 添加
matVector.push_back(mat)

// 获取
matVector.get(index) -> mat

// 设置
matVector.set(index, mat)

  matVector(cv.MatVector): 图像向量

  mat(cv.Mat): 图像
  index(number): 索引值

チャンネルの分割と結合

// 拆分
cv.split(src, channels)

// 合并
cv.merge(channels, dst)

  src(cv.Mat): 输入图像
  dst(cv.Mat): 输出图像
  channels(cv.MatVector): 通道图像向量

オブジェクトの削除

// 删除图像对象
mat.delete()

// 删除图像向量对象
matVector.delete()

  mat(cv.Mat): 图像
  matVector(cv.MatVector): 图像向量

ビデオストリームを作成する

new cv.VideoCapture(videoSource) -> cap

  videoSource(Dom/string): video 标签或其 id

  cap(cv.VideoCapture): 视频流

ビデオフレームを読み取る

cap.read(mat)

  cap(cv.VideoCapture): 视频流

  mat(cv.Mat): 图像

API と詳細情報については、公式ドキュメントを参照してください: OpenCV Docs
サンプルコードの詳細については、公式ガイド「OpenCV.js チュートリアル」を参照してください。