javascript - 从类似 Blob 的图像的(内部和外部)边缘创建路径

Question

我正在寻找一种方法来从二进制图像(仅黑白像素)创建类似于 svg 的路径。图像本身将是一个形状不规则的 Blob ，其中可能有洞。

没有孔，我只需要一个边界路径来重新创建 blob 的边界。当 blob 中有漏洞时，我可以使用其他路径(我猜，因为单独一条路径无法重新创建它)。最后我只需要知道哪条路是外面的路，哪条路是洞。

我已经找到了这些:

• How to add stroke/outline to transparent PNG image in JavaScript canvas
• Creating a path from the edge of an image
• How can I find hole in a 2D matrix?

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

如果有人有想法或什至有更多资源，那就太好了。

PS:如果这有什么不同的话，我正在使用 canvas 和 javascript (fabricJS)。

Answer 1

最后我成功地使用了 markE 描述的另一个选项(尽管它有点修改)。我正在使用 Marching Squares Algorithm (MSA) 和 Floodfill Algorithm (FFA) 来实现此目的。通过 Douglas-Peucker 算法 (DPA) 简化结果点。

• MAA:https://stackoverflow.com/a/25875512/2577116
• FFA:http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/
• DPA:https://stackoverflow.com/a/22516982/2577116
• (平滑:https://stackoverflow.com/a/7058606/2577116)

我把所有的东西都放在了这个 jsFiddle 中.

---

步骤:

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

对于更简单的代码，我目前的随机颜色只会产生灰色阴影。 R=G=B 和 A=255 允许更简单的检查。另一方面，此解决方案将轮廓限制为最大值。 254 个孔(256 种灰色阴影 - 路径颜色 (0) - 填充颜色(无孔))。如果需要更多，可以扩展代码以创建 R、G、B 甚至 A 的随机值。不要忘记相应地采用颜色检查 ;)

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