位图转换为SVG路径

Question

我不知道如何使用JavaScript/Node.js编写算法来逐像素将位图转换为svg路径：

// input
0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 1 1 1 1 1 1 0 0 
0 0 1 1 1 1 1 1 0 0 
0 1 1 1 0 0 1 1 1 0 
0 1 1 1 0 0 1 1 1 0 
0 0 1 1 1 1 1 1 0 0 
0 0 1 1 1 1 1 1 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 

// output
<path d="M2 2 h6 v2 h1 v2 h-1 v2 h-6 v-2 h-1 v-2 h1 v-2 M4 4 v2 h2 v-2 z">

有人知道这个算法应该如何工作吗？

任何伪代码都会有所帮助。

以下工具采用了类似的方法：

• https://github.com/59naga/pixel-to-svg
• https://github.com/brainshave/sharpvg
• https://codepen.io/shshaw/pen/XbxvNj
• http://drububu.com/tutorial/bitmap-to-vector.html

- pravdomil

---

你的问题是：“我正在创建一个算法，但不知道如何制作这个算法”？ - Mike B

是的，我会更新问题 - pravdomil

Answer 1

您可以像这样将像素转换为SVG路径字符串。

使用这个算法，我编写了一个脚本将像素艺术转换为SVG。

http://defghi1977.html.xdomain.jp/tech/img2svg3/dot2svg3.htm

（很抱歉，此页面是用日语编写的。）

- defghi1977

---

是的，基本上就是这样，但是从第一步到第二步让我遇到了麻烦，你在算法中如何将重叠的向量连接起来的？ - pravdomil

例如，如果一个向量由x:y:direction（字符串）表示，那么0:0:right向量的反向是1:0:left。因此，您可以将向量推送到（正常）对象作为搜索反向向量的键。 - defghi1977

我想我有了，你的代码在互联网上可用吗？GitHub上有吗？顺便说一下，我添加了更多解决同样问题的工具，大部分来自日本 :) 看看这个问题。 - pravdomil