图形编辑器基于Paper.js教程27：对图像描摹的功能实现，以及参数调整

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

我们知道要雕刻图片可以通过分析图片的像素来生成相应的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>