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

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

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

例如下面的图片:

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

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

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

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


📦 使用说明(API 文档)

✅ 基本流程

js 复制代码
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 对象中加载图像。

js 复制代码
const file = inputElement.files[0];
potrace.loadImageFromFile(file);

loadImageFromUrl(url)

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

js 复制代码
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 曲线优化的容差
示例:
js 复制代码
potrace.setParameter({
  turnpolicy: "black",
  turdsize: 5,
  optcurve: true,
  alphamax: 0.8,
  opttolerance: 0.3
});

▶️ 3. 处理图像

process(callback)

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

js 复制代码
potrace.process(() => {
  console.log("处理完成,SVG 获取中...");
});

🖍️ 4. 获取 SVG 矢量结果

getSVG(scale, opt_type)

生成 SVG 字符串。

参数 类型 默认值 说明
scale number 1.0 输出 SVG 的缩放倍数
opt_type string 可选 可设为 "curve",表示使用曲线表示输出(默认为路径指令)
js 复制代码
const svg = potrace.getSVG(1.5, "curve");

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

js 复制代码
document.getElementById("preview").innerHTML = svg;

📋 完整示例

html 复制代码
<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月份的面试。

相关推荐
一只猪皮怪517 分钟前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Misnice19 分钟前
React渲染超大的字符串
前端·javascript·react.js
天天向上的鹿茸20 分钟前
用矩阵实现元素绕不定点旋转
前端·线性代数·矩阵
特立独行的猫a1 小时前
C 语言各种指针详解
java·c语言·开发语言
彭于晏Yan2 小时前
MyBatis-Plus使用动态表名分表查询
java·开发语言·mybatis
李鸿耀3 小时前
主题换肤指南:设计到开发的完整实践
前端
Rotion_深4 小时前
C# 对Bitmap 的一些处理方法,裁剪,压缩,旋转等
图像处理·c#
MediaTea7 小时前
Python IDE:Spyder
开发语言·ide·python
不枯石8 小时前
Matlab通过GUI实现点云的均值滤波(附最简版)
开发语言·图像处理·算法·计算机视觉·matlab·均值算法
不枯石8 小时前
Matlab通过GUI实现点云的双边(Bilateral)滤波(附最简版)
开发语言·图像处理·算法·计算机视觉·matlab