Javascript 从水滴状图像的（内部和外部）边创建路径_Javascript_Image Processing_Canvas_Html5 Canvas_Edge Detection

Javascript 从水滴状图像的（内部和外部）边创建路径

javascript image-processing canvas html5-canvas

Javascript 从水滴状图像的（内部和外部）边创建路径,javascript,image-processing,canvas,html5-canvas,edge-detection,Javascript,Image Processing,Canvas,Html5 Canvas,Edge Detection,我正在寻找一种从二值图像（只有黑白像素）创建类似svg的路径的方法。图像本身将是一个不规则形状的斑点，可能有洞如果没有孔，我只需要一个边界路径，它将重新创建水滴的边界。当blob中有洞时，我可以选择其他路径（因为我想单靠一条路径无法重建）。最后，我只需要知道哪条路是最外面的，哪条是洞我已经找到了这些：此外，我需要检测孔。结果是多边形还是路径对我来说并不重要。我只需要具有足够高精度的点，使曲线保持曲线：）如果有人有一个想法，或者有更多的来源，那就太好了 PS：如果这有什么不同的话

我正在寻找一种从二值图像（只有黑白像素）创建类似svg的路径的方法。图像本身将是一个不规则形状的斑点，可能有洞

如果没有孔，我只需要一个边界路径，它将重新创建水滴的边界。当blob中有洞时，我可以选择其他路径（因为我想单靠一条路径无法重建）。最后，我只需要知道哪条路是最外面的，哪条是洞

我已经找到了这些：

此外，我需要检测孔。结果是多边形还是路径对我来说并不重要。我只需要具有足够高精度的点，使曲线保持曲线：）

如果有人有一个想法，或者有更多的来源，那就太好了

PS：如果这有什么不同的话，我正在使用canvas和javascript（fabricJS）。

最佳选项

如果用代码绘制blob，那么最简单和最好的方法就是将每个blob（和子blob）分解为其组件Bezier曲线。FabricJS是开源的，因此您可以看到它们是如何创建曲线的，以及如何分解曲线的。结果将是十几条左右的贝塞尔曲线，很容易重新绘制或导航。如果需要导航Bezier曲线的帮助，请参阅本教程

其他选项

您需要获取像素信息，因此需要

context.drawImage

将织物斑点绘制到本地画布上，并使用

context.getImagedata

获取像素信息

假设：

所有像素都是白色或黑色
斑点为黑色：rgba（0,0,0255）
水滴外部为白色：rgba（255255）
水滴中的孔为白色：rgba（255255）

查找水滴和孔路径的平面图：

加载imageData:

context.getImageData（0,0，canvas.width，canvas.height）

在图像的周长上找到一个白色像素

使用泛光填充算法（FFA）将外部白色替换为透明度

使用Marching Squares算法（MSA）查找最外面的水滴周长并保存该水滴路径

使用泛光填充算法用透明填充在#4中发现的斑点。这使得外部水滴对下一轮MSA“不可见”。在这一点上，你只有白色的洞——其他一切都是透明的

使用Marching Squares算法（MSA）查找下一个白色孔洞的周长并保存该孔洞路径

使用泛光填充算法以透明度填充#6中的白洞。这使得下一轮MSA无法看到这个洞

重复#6和#7找到每个剩余的白洞

如果MSA报告没有像素，则完成

为了提高效率，您可以在后续步骤中重复使用步骤#1中的图像数据。完成所有步骤后，可以放弃imageData

由于blob是曲线，您将发现blob路径包含许多点。您可以使用路径点缩减算法将这些多个点简化为更少的点。