opencv.js 鼠标点击识别图像轮廓并显示.

最新推荐文章于 2025-10-12 15:19:58 发布

原创

最新推荐文章于 2025-10-12 15:19:58 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍了一种使用OpenCV.js在网页上实现图像轮廓提取的方法，包括阈值处理、轮廓查找和鼠标交互显示最近轮廓的功能。通过调整阈值、选择阈值类型和设置轮廓长度，用户可以动态观察不同参数下的轮廓效果。此外，文章还解决了长时间运行导致的内存溢出问题，并提供了完整的HTML和JavaScript代码示例。

先上效果图.
在这里插入图片描述
能够通过OpenCV提取轮廓,并根据鼠标的位置显示相应的轮廓

在这里插入图片描述
不会做动态图, 就先放两个效果图吧.
刚开始存在一些bug. 长时间使用. 会内存溢出和报错. 具体跟Webassembly 有关,后来解决了. 要执行dst.delete()

You have to call delete method of cv.Mat to free memory allocated in Emscripten’s heap. Please refer to Memeory management of Emscripten for details.

 
<html>
  <head>
  <meta charset="utf-8">
  <title>Hello OpenCV.js</title>
  
  
  <script async src="opencv4.5.0.js" onload="onOpenCvReady();" type="text/javascript"></script>
  
  </head>
  <body>
  <h2>Hello OpenCV.js</h2>
  <p id="status">OpenCV.js is loading...</p>
  <input type="button" value="处理" onclick="process()"/>
  当前阈值<input id="thresh" type="range"  min="0" max="250" step="1" value="250" onchange="process()">
  最大阈值<input id="maxThresh" type="range"  min="0" max="250" step="1" value="255" onchange="process()">
  
  轮廓长度<input id="startContoursLength" type="range"  min="1" max="50000" step="1" value="10" onchange="process()">

  ThresholdTypes 阈值类型
  <select id="ThreshType" onchange="process()"> 
    <option value="THRESH_BINARY">THRESH_BINARY</option>
    <option value="THRESH_BINARY_INV">THRESH_BINARY_INV</option>
    <option value="THRESH_TRUNC">THRESH_TRUNC</option>
    <option value="THRESH_TOZERO">THRESH_TOZERO</option>
    <option value="THRESH_TOZERO_INV">THRESH_TOZERO_INV</option>