学习opencv.js之基本使用方法(读取,显示,灰度化,边缘检测,特征值点检测)

opencv.js是什么

OpenCV.js 是 OpenCV(Open Source Computer Vision Library)的 JavaScript 版本。OpenCV 是一个广泛使用的计算机视觉和图像处理库,提供了一系列功能强大的算法和工具,用于处理图像、视频、特征提取、对象识别等计算机视觉任务。

OpenCV.js 是将 OpenCV 库编译为 JavaScript 的版本,使得开发者可以在浏览器环境中使用 JavaScript 来访问和调用 OpenCV 的功能。它提供了一组基本的 API,允许开发者使用 JavaScript 进行图像处理、计算机视觉和机器学习任务,而无需依赖其他语言或平台。

使用 OpenCV.js,你可以在 Web 应用程序中进行实时图像处理,从摄像头或图像源获取图像数据,并使用 OpenCV.js 提供的功能进行分析和处理。它使得图像处理和计算机视觉变得更加便捷,同时充分利用了 JavaScript 在 Web 开发中的广泛应用性和便利性。

需要注意的是,由于 JavaScript 的性能限制,OpenCV.js 的执行速度可能相对较慢,尤其是在处理大规模图像或进行复杂计算时。然而,它仍然是一个有用的工具,特别适用于简单的图像处理任务和小规模的计算机视觉应用。

总结起来,OpenCV.js 是 OpenCV 的 JavaScript 版本,提供了一组基本的 API,使得开发者可以在浏览器环境中使用 JavaScript 进行图像处理和计算机视觉任务。


OpenCV.js 4.x 版本:约为 10 MB 到 20 MB 之间。
OpenCV.js 3.x 版本:约为 7 MB 到 15 MB 之间。


基本使用手段

OpenCV.js 是 OpenCV 库的 JavaScript 版本,它提供了一组基本的 API 和函数,用于图像处理、计算机视觉和机器学习任务。下面是一些常用的基本 API 和它们的原理:

  1. cv.imread(): 这个函数用于加载图像文件,并将其转换为 OpenCV.js 中的图像对象。它基于底层的 JavaScript 图像对象或者 HTML 元素创建了一个 OpenCV.js 的图像对象。参数是在nodejs中是图像的图片地址,而在前端页面中是img标签的document元素返回值是一个图像矩阵。OpenCV.js 中的许多函数返回的结果通常是一个矩阵或多维数组,用于表示图像或其他计算机视觉数据。

OpenCV.js 中的许多函数返回的结果通常是一个矩阵或多维数组,用于表示图像或其他计算机视觉数据。在 OpenCV.js 中,图像通常以矩阵的形式表示,使用 cv.Mat 对象来表示图像数据。cv.Mat 是一个多维数组,用于存储像素值和其他图像相关的信息,如宽度、高度、通道数等。
许多 OpenCV.js 函数会接受一个输入矩阵(例如源图像),并返回一个输出矩阵(例如处理后的图像)。这些输出矩阵可以进一步传递给其他 OpenCV.js 函数进行进一步的处理。除了图像数据,OpenCV.js 中的其他计算机视觉功能(例如特征检测、对象识别等)也常常使用矩阵或多维数组来表示输入和输出数据。因此,在使用 OpenCV.js 进行图像处理和计算机视觉任务时,你通常会与矩阵(cv.Mat 对象)和多维数组打交道,并对它们进行操作和处理。
需要注意的是,OpenCV.js 的函数返回的矩阵通常是通过引用传递,而不是复制矩阵数据。这意味着对返回的矩阵进行修改可能会影响原始数据。如果需要保留原始数据,可以使用 .clone() 方法创建副本进行操作。

  1. cv.imshow(): 这个函数用于显示图像在 HTML 页面中的指定位置。它将 OpenCV.js 图像对象转换为 HTML 图像元素,并将其显示在指定的 HTML 元素中。这个指定的元素就是canvas元素,两个从参数,一个是canvas的ID,或者canvas的document元素对象,另一个是获取的Mat矩阵对象。

  2. cv.cvtColor(): 这个函数用于将图像从一个颜色空间转换到另一个颜色空间,比如从 RGB 到灰度图像,或者从 BGR 到 HSV。

  3. cv.threshold(): 这个函数用于对图像进行阈值处理,将图像分割为二值图像。它可以根据像素的灰度值将像素分为两个类别,比如前景和背景。

  4. cv.findContours(): 这个函数用于在二值图像中查找轮廓。它基于图像中的像素值找到对象的边界,并返回一个包含边界点的轮廓。

  5. cv.matchTemplate(): 这个函数用于在图像中进行模板匹配。它在目标图像中寻找与给定模板最相似的图像区域,并返回匹配的结果。

  6. cv.Canny(image, threshold1, threshold2, apertureSize, L2gradient): 这个函数用于执行 Canny 边缘检测算法。它接受以下参数:
    image: 输入图像,可以是灰度图像或彩色图像。
    threshold1 和 threshold2: 阈值参数,用于控制边缘的检测灵敏度。
    apertureSize: Sobel 算子的孔径大小,默认值为 3。
    L2gradient: 一个布尔值,用于指定是否使用 L2 范数计算梯度大小,默认为 false。

这些只是 OpenCV.js 提供的一些基本 API 的示例,还有更多的函数和方法可用于各种图像处理和计算机视觉任务。OpenCV.js 的基本原理是将 C++ 版本的 OpenCV 库编译为 JavaScript,并在浏览器环境中执行。这允许开发者在 JavaScript 中利用 OpenCV 库的功能来处理图像和执行计算机视觉任务,而无需使用其他语言或平台。
学习opencv.js之基本使用方法(读取,显示,灰度化,边缘检测,特征值点检测)_第1张图片

图像的读取与输出

学习opencv.js之基本使用方法(读取,显示,灰度化,边缘检测,特征值点检测)_第2张图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opencv JS</title>
    <script async src="/opencv.js" onload="opencvLoad()" type="text/javascript"></script>
   
    <style>
      .container{
        display: flex;
      }
      .inputoutput{
        width: 300px;
        height: 300px;
        border: 1px solid red;
      }
      #imageSrc{
        width: 300px;
        /* height: 400px; */
      }
      #canvasOutput{
        width: 300px;
        /* height: 400px; */
      }
    </style>
  </head>
<body>
  <h2>Program of OpenCV.js</h2>
  <p id="status">OpenCV.js is loading...</p>
  <div class="container">
    <div class="inputoutput">
      <img id="imageSrc" alt="No Image" />
      <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
    </div>
    <div class="inputoutput">
      <canvas id="canvasOutput" ></canvas>
      <div class="caption">canvasOutput</div>
    </div>
  </div>
</body>
<script type="text/JavaScript">
  var imgSrcElement=document.getElementById('imageSrc');
  var imageInput=document.getElementById('fileInput');

  imageInput.addEventListener('change',(e)=>{
    imgSrcElement.src=URL.createObjectURL(e.target.files[0]);
  })

  // 因为是异步操作,所以需要onload等图像加载完毕后执行,也是回调
  imgSrcElement.onload=function(){
    // 读取获取矩阵(步骤1)
    let mat=cv.imread(imgSrcElement);
    // 输出获取矩阵(步骤2)
    cv.imshow('canvasOutput',mat);
    // 调用delete释放堆的内存
    mat.delete();
  }
var opencvLoad=function(){
  document.getElementById('status').innerHTML='opencv is ready';//回调函数,用来显示opencv.js加载完成
}
</script>
</html>

灰度化

学习opencv.js之基本使用方法(读取,显示,灰度化,边缘检测,特征值点检测)_第3张图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opencv JS</title>
    <script async src="/opencv.js" onload="opencvLoad()" type="text/javascript"></script>
   
    <style>
      .container{
        display: flex;
      }
      .inputoutput{
        width: 300px;
        height: 300px;
        border: 1px solid red;
      }
      #imageSrc{
        width: 300px;
        /* height: 400px; */
      }
      #canvasOutput{
        width: 300px;
        /* height: 400px; */
      }
    </style>
  </head>
<body>
  <h2>Program of OpenCV.js</h2>
  <p id="status">OpenCV.js is loading...</p>
  <div class="container">
    <div class="inputoutput">
      <img id="imageSrc" alt="No Image" />
      <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
    </div>
    <div class="inputoutput">
      <canvas id="canvasOutput" ></canvas>
      <div class="caption">canvasOutput</div>
    </div>
  </div>
</body>
<script type="text/JavaScript">
  var imgSrcElement=document.getElementById('imageSrc');
  var imageInput=document.getElementById('fileInput');

  imageInput.addEventListener('change',(e)=>{
    imgSrcElement.src=URL.createObjectURL(e.target.files[0]);
  })

  // 因为是异步操作,所以需要onload等图像加载完毕后执行,也是回调
  imgSrcElement.onload=function(){
    // 读取获取矩阵(步骤1)
    let mat=cv.imread(imgSrcElement);
    // 新建图像矩阵(步骤2)
    let gray = new cv.Mat();
    // 将图像从一个颜色空间转换到另一个颜色空间(步骤3)
    cv.cvtColor(mat, gray, cv.COLOR_RGBA2GRAY);
     // 展现这个新的图像空间矩阵(步骤4)
    cv.imshow('canvasOutput',gray);
    // 调用delete释放堆的内存
    mat.delete();
    gray.delete();
  }
var opencvLoad=function(){
  document.getElementById('status').innerHTML='opencv is ready';//回调函数,用来显示opencv.js加载完成
}
</script>
</html>

边缘检测

学习opencv.js之基本使用方法(读取,显示,灰度化,边缘检测,特征值点检测)_第4张图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opencv JS</title>
    <script async src="/opencv.js" onload="opencvLoad()" type="text/javascript"></script>
   
    <style>
      .container{
        display: flex;
      }
      .inputoutput{
        width: 300px;
        height: 300px;
        border: 1px solid red;
      }
      #imageSrc{
        width: 300px;
        /* height: 400px; */
      }
      #canvasOutput{
        width: 300px;
        /* height: 400px; */
      }
    </style>
  </head>
<body>
  <h2>Program of OpenCV.js</h2>
  <p id="status">OpenCV.js is loading...</p>
  <div class="container">
    <div class="inputoutput">
      <img id="imageSrc" alt="No Image" />
      <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
    </div>
    <div class="inputoutput">
      <canvas id="canvasOutput" ></canvas>
      <div class="caption">canvasOutput</div>
    </div>
  </div>
</body>
<script type="text/JavaScript">
  var imgSrcElement=document.getElementById('imageSrc');
  var imageInput=document.getElementById('fileInput');

  imageInput.addEventListener('change',(e)=>{
    imgSrcElement.src=URL.createObjectURL(e.target.files[0]);
  })

  // 因为是异步操作,所以需要onload等图像加载完毕后执行,也是回调
  imgSrcElement.onload=function(){
    // 读取获取矩阵(步骤1)
    let mat=cv.imread(imgSrcElement);
    // 新建图像矩阵(步骤2,灰度)
    let gray = new cv.Mat();
    // 将图像从一个颜色空间转换到另一个颜色空间(步骤3)
    cv.cvtColor(mat, gray, cv.COLOR_RGBA2GRAY);
    // 新建图像矩阵(步骤4,边缘)
    const edges = new cv.Mat();
    // 灰度转为边缘检测(步骤5)
    cv.Canny(gray, edges, 50, 150);
    // 展示边缘检测转化后的图像空间矩阵
    cv.imshow('canvasOutput',edges);
    // 调用delete释放堆的内存
    mat.delete();
    gray.delete();
    edges.delete();
  }
var opencvLoad=function(){
  // document.getElementById('status').innerHTML='opencv is ready';//回调函数,用来显示opencv.js加载完成
  document.getElementById('status').innerHTML='opencv is ready';//回调函数,用来显示opencv.js加载完成
}
</script>
</html>

特征点检测

你可能感兴趣的:(opencv.js,学习,opencv,javascript)