首页用opencv.js写个小案例

用opencv.js写个小案例

时间: 2023-11-21 13:35:09 浏览: 177

好的，我可以为您提供一个使用OpenCV.js写的小案例。这个案例将使用OpenCV.js库中的图像处理功能，将一张图片中的边缘检测出来。以下是代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>OpenCV.js Edge Detection Example</title> </head> <body> <h1>OpenCV.js Edge Detection Example</h1> <img id="inputImage" src="https://i.imgur.com/6tKQzVv.png" width="300"> <canvas id="outputCanvas" width="300" height="300"></canvas> <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script> <script type="text/javascript"> function onOpenCvReady() { // Load input image and create output canvas var inputImage = cv.imread('inputImage'); var outputCanvas = document.getElementById('outputCanvas'); var outputContext = outputCanvas.getContext('2d'); // Convert image to grayscale var grayImage = new cv.Mat(); cv.cvtColor(inputImage, grayImage, cv.COLOR_RGBA2GRAY); // Apply edge detection var edges = new cv.Mat(); cv.Canny(grayImage, edges, 100, 200); // Display result on output canvas cv.imshow(outputCanvas, edges); // Release memory inputImage.delete(); grayImage.delete(); edges.delete(); } </script> </body> </html> ``` 这段代码加载OpenCV.js库，读入一张图片，并使用Canny边缘检测算法检测出边缘，最后在一个canvas上显示结果。您可以将图片链接替换为您自己的图片链接，然后尝试运行这段代码，看看效果如何。

阅读全文