图形编辑器基于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({ ... })

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

示例：

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 字符串。

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月份的面试。