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

拿我格子衫来

发布于 2025-04-22 08:36:55

35400

代码可运行

文章被收录于专栏：TopFETopFE

运行总次数：0

代码可运行

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-04-21，如有侵权请联系 cloudcommunity@tencent.com 删除

优化