学习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 和它们的原理：

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() 方法创建副本进行操作。

cv.imshow(): 这个函数用于显示图像在 HTML 页面中的指定位置。它将 OpenCV.js 图像对象转换为 HTML 图像元素，并将其显示在指定的 HTML 元素中。这个指定的元素就是canvas元素，两个从参数，一个是canvas的ID，或者canvas的document元素对象，另一个是获取的Mat矩阵对象。
cv.cvtColor(): 这个函数用于将图像从一个颜色空间转换到另一个颜色空间，比如从 RGB 到灰度图像，或者从 BGR 到 HSV。
cv.threshold(): 这个函数用于对图像进行阈值处理，将图像分割为二值图像。它可以根据像素的灰度值将像素分为两个类别，比如前景和背景。
cv.findContours(): 这个函数用于在二值图像中查找轮廓。它基于图像中的像素值找到对象的边界，并返回一个包含边界点的轮廓。
cv.matchTemplate(): 这个函数用于在图像中进行模板匹配。它在目标图像中寻找与给定模板最相似的图像区域，并返回匹配的结果。
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 库的功能来处理图像和执行计算机视觉任务，而无需使用其他语言或平台。
在这里插入图片描述

图像的读取与输出

在这里插入图片描述

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

灰度化

在这里插入图片描述

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

边缘检测

在这里插入图片描述

<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.js是什么

基本使用手段

图像的读取与输出

灰度化

边缘检测

特征点检测

vue3内置组件Transition简单介绍和应用

vue3 nextTick()应用

经典布局（flex和传统两种实现）左右两栏式

node内存泄漏耗尽： FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript

前端vue打包时遇到‘default‘ is not exported by node_modules/vue/dist/vue.runtime.esm-bundler.js, imported by

vue element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）

Vue3 watch 侦听对象多个属性

微信开发相关：使用微信 JS-SDK 接口

vue报错：Uncaught SyntaxError: Unexpected token &lt；也就是前端的js请求响应数据是html格式的原因和解决方法

HTML＋CSS＋JS 登录页面的代码结构入门

前端哥

HTML5 css3课后习题【一】

HTML零基础入门教程（详细）

css3 table表格

CSS 基础知识选择器

用HTML CSS实现旋转的立方体

float,flex和grid布局

CSS3 用户界面、图片、按钮

ant-design的Table组件暂无数据，滚动条位置修改

定位position（绝对定位absolute 相对定位 relative）

vue3内置组件Transition简单介绍和应用

1
移动端css布局大全

2024-02-06 15:02:421000

2
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

3
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

4
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

5
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

6
html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

7
响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

8
使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？

2024-02-06 15:02:59995

9
导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994

10
玩转H5和CSS3，轻松打造视觉盛宴

2024-02-08 15:02:44993