宝鸡做网站公司海外广告优化师

本篇文章来讲一下 图像描摹的功能的实现。

我们知道要雕刻图片可以通过分析图片的像素来生成相应的gcode进行雕刻，但如果你想要将图片转换为线稿进行雕刻，这个时候就要从图片中提取出 线稿。
例如下面的图片：

你想要获取到这个图片的线稿，如下图，是一个矢量的svg

目前有一些js的方法可以从图片中获取线稿，

首推的是这个库 https://github.com/kilobtye/potrace

potrace.js 是一个用于将栅格图像（如 JPG、PNG）转换为矢量图（SVG）的 JavaScript 库，基于著名的 Potrace 算法。它能提取图像中的线稿轮廓，非常适用于图像转矢量、线稿提取、激光雕刻路径生成等应用场景。

---

📦 使用说明（API 文档）

✅ 基本流程

potrace.loadImageFromFile(file);         // 加载图像（File 对象）
potrace.setParameter({...});             // 设置参数（可选）
potrace.process(() => {const svg = potrace.getSVG(1.0);       // 获取 SVG 字符串console.log(svg);
});

---

🖼️ 1. 加载图像

loadImageFromFile(file)

从 <input type="file"> 获取的 File 对象中加载图像。

const file = inputElement.files[0];
potrace.loadImageFromFile(file);

---

loadImageFromUrl(url)

从 URL 加载图像。受浏览器同源策略限制，只能加载同源图片。

potrace.loadImageFromUrl("images/sample.png");

注意：potrace.js 不会自动进行前处理，例如灰度处理或二值化。它直接将图像转换为黑白。

---

⚙️ 2. 设置参数

setParameter({ ... })

用于微调线稿提取效果。支持以下参数：

参数名	类型	默认值	说明
turnpolicy	string	"minority"	路径歧义处理方式，可选："black" "white" "left" "right" "minority" "majority"
turdsize	number	2	去除小块区域的大小阈值，单位为像素数量
optcurve	boolean	true	是否开启曲线优化
alphamax	number	1	拐角角度阈值，越小越锐利
opttolerance	number	0.2	曲线优化的容差

示例：

potrace.setParameter({turnpolicy: "black",turdsize: 5,optcurve: true,alphamax: 0.8,opttolerance: 0.3
});

---

▶️ 3. 处理图像

process(callback)

当图像加载完毕后，自动运行 Potrace 算法，并执行回调函数。

potrace.process(() => {console.log("处理完成，SVG 获取中...");
});

---

🖍️ 4. 获取 SVG 矢量结果

getSVG(scale, opt_type)

生成 SVG 字符串。

参数	类型	默认值	说明
scale	number	1.0	输出 SVG 的缩放倍数
opt_type	string	可选	可设为 "curve"，表示使用曲线表示输出（默认为路径指令）

const svg = potrace.getSVG(1.5, "curve");

你可以将这个字符串插入到页面中展示 SVG：

document.getElementById("preview").innerHTML = svg;

---

📋 完整示例

<input type="file" id="upload" />
<div id="preview"></div>
<script src="potrace.js"></script>
<script>document.getElementById("upload").addEventListener("change", (e) => {const file = e.target.files[0];potrace.loadImageFromFile(file);potrace.setParameter({turnpolicy: "minority",turdsize: 3,optcurve: true,alphamax: 1,opttolerance: 0.2});potrace.process(() => {const svg = potrace.getSVG(1.0, "curve");document.getElementById("preview").innerHTML = svg;});});
</script>

此外还有 nodejs版本
https://github.com/iwsfg/node-potrace

图片直接转svg
https://github.com/tomayac/SVGcode

题外话，今天教师资格的考试成绩出来啦， 过线，准备5月份的面试。