opencv.js画轮廓
时间: 2023-11-07 08:00:25 浏览: 46
要在OpenCV.js中绘制轮廓,您可以使用cv.drawContours函数。该函数需要四个参数:
- image:要在其上绘制轮廓的图像
- contours:要绘制的轮廓列表
- contourIdx:要绘制的轮廓的索引(如果为负,则绘制所有轮廓)
- color:轮廓的颜色
以下是一个使用cv.drawContours绘制轮廓的示例代码:
```javascript
// 读取图像
const img = cv.imread('canvasInput');
// 转换为灰度图像
const gray = new cv.Mat();
cv.cvtColor(img, gray, cv.COLOR_RGBA2GRAY);
// 进行边缘检测
const edges = new cv.Mat();
cv.Canny(gray, edges, 50, 200, 3);
// 查找轮廓
const contours = new cv.MatVector();
const hierarchy = new cv.Mat();
cv.findContours(edges, contours, hierarchy, cv.RETR_TREE, cv.CHAIN_APPROX_SIMPLE);
// 在图像上绘制轮廓
const output = cv.Mat.zeros(img.rows, img.cols, cv.CV_8UC3);
const color = new cv.Scalar(255, 0, 0);
cv.drawContours(output, contours, -1, color);
// 将结果写入输出画布
cv.imshow('canvasOutput', output);
// 释放内存
img.delete();
gray.delete();
edges.delete();
contours.delete();
hierarchy.delete();
output.delete();
```
在此示例中,我们首先读取输入图像并将其转换为灰度图像。然后,我们使用cv.Canny函数进行边缘检测。接下来,我们使用cv.findContours函数查找图像中的轮廓。最后,我们使用cv.drawContours函数在输出图像上绘制轮廓,并将结果写入输出画布。
请注意,在此示例中,我们使用cv.imshow函数将输出图像显示在名为“canvasOutput”的画布上。要使用此方法,您需要在HTML中添加一个<canvas>元素,并使用OpenCV.js绑定将其与cv.imshow函数连接起来:
```html
<canvas id="canvasInput" width="640" height="480"></canvas>
<canvas id="canvasOutput" width="640" height="480"></canvas>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
<script type="text/javascript">
function onOpenCvReady() {
// 初始化OpenCV.js并在加载完成后执行此函数
cv.onRuntimeInitialized = function() {
// 在此处编写OpenCV.js代码
};
}
</script>
```