Guide de démarrage rapide OpenCV.js

1. Introduction

• OpenCV.js : version JavaScript d'OpenCV

• Guide officiel : Tutoriels OpenCV.js

2. Télécharger

• Vous pouvez télécharger la version spécifiée du fichier opencv.js précompilé via le lien ci-dessous

  https://docs.opencv.org/{version}/opencv.js
  

• Par exemple, téléchargez le fichier opencv.js de la version 4.5.5

  https://docs.opencv.org/4.5.5/opencv.js
  

3. Installation et utilisation

1. Importation de balises de script HTML

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

2. utilisation de 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. Type de données

• type de données d'image

  • Mat est la structure de données d'image de base d'OpenCV, et son tableau de comparaison des types de données est le suivant :

    Propriétés des données	Type C++	Tableau typé JavaScript	Type de tapis
    données	voler	TableauUint8	CV_8U
    date8S	carboniser	Int8Tableau	CV_8S
    données16U	bref	Tableau Uint16	CV_16U
    data16S	court	Tableau Int16	CV_16S
    data32S	entier	tableau int32	CV_32S
    data32F	flotter	Float32Array	CV_32F
    données64F	double	Float64Array	CV_64F

  • MatVector est un vecteur composé de plusieurs Mats, utilisez les méthodes push_back(mat: cv.Mat), get(index: number) et set(index: number, mat: cv.Mat) pour ajouter, lire et définir Mat sur MatVector

  • Pour les variables de types Mat et MatVector, veuillez utiliser la méthode delete() pour les supprimer lorsqu'elles ne sont plus nécessaires, sinon les variables continueront d'occuper de la mémoire

  • La manière simple de créer et de supprimer est la suivante :

    // 创建一个 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()
    

• D'autres types de données et leurs formats d'objet JS correspondants peuvent être utilisés dans les deux sens lors de la création de variables

  // 坐标点
  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

• L'API d'OpenCV.js est très similaire à l'API OpenCV C++ version

• Les API couramment utilisées d'OpenCV.js sont les suivantes :

  • Lecture et affichage d'images

    // 读取
    cv.imread(dom) -> dst
    
    // 显示
    cv.imshow(dst, dom)
    

      dom(Dom/string): img 标签或其 id（读取） / canvas 标签或其 id（读取/显示）
    
      dst(cv.Mat): 图像（RGBA）
    

  • créer une image

    // 创建一个 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）
    

  • Obtenir les propriétés de l'image

    // 图像高度
    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 ...）
    

  • obtenir des données d'image

    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 位浮点数据
    

  • recadrer l'image

    mat.roi(rect) -> matROI
    

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

  • conversion de l'espace colorimétrique

    cv.cvtColor(src, dst, code)
    

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

  • mise à l'échelle des images

    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 ...）
    

  • Créer un vecteur d'image

    new cv.MatVector() -> matVector
    

      matVector(cv.MatVector): 图像向量
    

  • Opérations sur les vecteurs d'images

    // 添加
    matVector.push_back(mat)
    
    // 获取
    matVector.get(index) -> mat
    
    // 设置
    matVector.set(index, mat)
    

      matVector(cv.MatVector): 图像向量
    
      mat(cv.Mat): 图像
      index(number): 索引值
    

  • Séparation et fusion de chaînes

    // 拆分
    cv.split(src, channels)
    
    // 合并
    cv.merge(channels, dst)
    

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

  • supprimer un objet

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

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

  • Créer un flux vidéo

    new cv.VideoCapture(videoSource) -> cap
    

      videoSource(Dom/string): video 标签或其 id
    
      cap(cv.VideoCapture): 视频流
    

  • lire l'image vidéo

    cap.read(mat)
    

      cap(cv.VideoCapture): 视频流
    
      mat(cv.Mat): 图像
    

• Pour plus d'API et des informations détaillées, veuillez vous référer à la documentation officielle : OpenCV Docs

• Pour plus d'exemples de codes, veuillez vous référer au guide officiel : Tutoriels OpenCV.js