javascript - 如何以特定偏移量围绕图像的彩色像素绘制一条线？

Question

我使用 opencv for Javascript 来生成源图像，我通过 putImageData 将其放置在 Canvas 上下文中。

我需要在图像的红色部分周围画一条线，距离红色大约 20 像素。第二张图片是我想要的……手绘的，但希望你能明白。

简单地克隆(到覆盖的 Canvas 中)并缩放红色图像后面的图像是行不通的(缩放不是正确的方法)。我想过使用dilate，但它似乎不太可靠，而且速度很慢。

<小时/>

更新:根据评论者的请求，这里有一个示例说明为什么扩展效果不佳。

// Dilate the image
let src = cv.imread('canvasOffset');
let dst = new cv.Mat();
let M = cv.Mat.ones(40, 40, cv.CV_8U);
let anchor = new cv.Point(-1, -1);
cv.dilate(src, dst, M, anchor, 1, cv.BORDER_CONSTANT, 
cv.morphologyDefaultBorderValue());
cv.imshow('canvasOffset', dst);
src.delete(); dst.delete(); M.delete()

Answer 1

感谢 Cris Luengo，这个问题得到了解决。

我能够将 OpenCV 的扩张与椭圆结构元素结合使用。它完全满足了我的需要。

给定一个包含原始图像的“canvasOffset” Canvas :

let src = cv.imread('canvasOffset');
let dst = new cv.Mat();
let M = new cv.Mat();
let ksize = new cv.Size(25, 25);
M = cv.getStructuringElement(cv.MORPH_ELLIPSE, ksize);
let anchor = new cv.Point(-1, -1);
cv.dilate(src, dst, M, anchor, 1, cv.BORDER_CONSTANT, cv.morphologyDefaultBorderValue());
cv.imshow('canvasOffset', dst);

结果: