Skip to content

Latest commit

 

History

History
316 lines (230 loc) · 7.62 KB

opencv.md

File metadata and controls

316 lines (230 loc) · 7.62 KB

OpenCV.js

1. 简介

2. 数据类型

  • 图像数据类型

    • Mat 是 OpenCV 基础的图像数据结构,其数据类型对照表如下:

      Data Properties C++ Type JavaScript Typed Array Mat Type
      data uchar Uint8Array CV_8U
      data8S char Int8Array CV_8S
      data16U ushort Uint16Array CV_16U
      data16S short Int16Array CV_16S
      data32S int Int32Array CV_32S
      data32F float Float32Array CV_32F
      data64F double Float64Array 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
    }

3. 常用接口

  • 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 Tutorials