图形编辑器基于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>
此外还有 nodejs版本
https://github.com/iwsfg/node-potrace
图片直接转svg
https://github.com/tomayac/SVGcode
题外话，今天教师资格的考试成绩出来啦， 过线，准备5月份的面试。
