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>
