图形编辑器基于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月份的面试。

相关推荐
CodeCraft Studio8 分钟前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
QQ_4376643149 分钟前
C++11 右值引用 Lambda 表达式
java·开发语言·c++
aramae10 分钟前
大话数据结构之<队列>
c语言·开发语言·数据结构·算法
誰能久伴不乏18 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
封奚泽优33 分钟前
使用Python实现单词记忆软件
开发语言·python·random·qpushbutton·qtwidgets·qtcore·qtgui
涔溪1 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾1 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的1 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Microvision维视智造1 小时前
从“人工眼”到‘智能眼’:EZ-Vision视觉系统如何重构生产线视觉检测精度?
图像处理·人工智能·重构·视觉检测
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架