从类似斑点的图像的（内部和外部）边缘创建路径

Question

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

如果没有洞，我只需要一个边界路径来重新创建斑点的边界。当斑点中有洞时，我可以使用额外的路径（我猜，单独一条路径无法重新创建它）。最后我只需要知道哪条路径是外部路径，哪些是洞。

我已经找到了这些：

• 如何在 JavaScript 画布中向透明 PNG 图像添加描边/轮廓
• 从图像边缘创建路径
• 如何找到二维矩阵中的空洞？

另外我需要检测漏洞。结果是多边形还是路径对我来说并不重要。我只需要精度足够高的点，使曲线保持弯曲:)

如果有人有一个想法甚至一些进一步的来源，那就太好了。

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

Answer 1

最后，我成功地采用了 markE 所描述的另一个选项（尽管它进行了一些修改）。我正在使用Marching Squares Algorithm (MSA)和Floodfill Algorithm (FFA)来实现这一目标。简化结果点是通过Ramer\xe2\x80\x93Douglas\xe2\x80\x93Peucker Algorithm (RDPA)。

\n

\n
• MAA： https ://stackoverflow.com/a/25875512/2577116
\n
• FFA： http ://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/
\n
• RDPA： /sf/answers/1576188771/
\n
• （平滑：/sf/answers/494102451/）
\n

\n

我将所有内容都放在这个jsFiddle中。

\n\n

脚步：

\n

\n
1. 用户完成自由绘制后获取路径对象
\n
2. 通过 base64 dataURL 从路径创建图像
\n
3. 转换为二值图像（仅 0 和 255 像素，无透明度）
\n
4. 应用FFA随机颜色到位置 0,0，保存颜色
\n
5. 转到下一个像素
\n
6. 如果像素具有已知的填充颜色或路径颜色（黑色），则继续下一个
\n
7. 否则用新的随机颜色填充，保存颜色
\n
8. 移动所有像素，重复 5.-7。
\n
9. 删除索引 1 上保存的颜色（它是路径轮廓周围的颜色（填充），因此它既不是路径也不是孔）
\n
10. 对于所有其他颜色应用MSA并简化结果点（带有DPA）
\n
11. 从简化的点创建多边形或...
\n
12. ...平滑点并创建路径
\n
13. 添加到画布，删除输入路径
\n
14. 完毕 ：）
\n

\n

对于更简单的代码，我目前的随机颜色仅创建灰色阴影。R=G=B 和 A=255 允许更简单的检查。另一方面，该解决方案限制轮廓具有最大值。254 个孔（256 个灰色阴影 - 路径颜色 (0) - 填充颜色（无孔））。如果需要更多，扩展代码来为 R、G、B 甚至 A 创建随机值是没有问题的。不要忘记相应地采用颜色检查；）

\n

整个算法可能没有针对性能进行优化，但老实说，我认为目前没有必要这样做。对于我的用例来说它已经足够快了。不管怎样，如果有人有关于优化的提示，我很高兴听到/阅读:)

\n