vectorizer 多色 PNG 转 SVG从单个图标到整目录批量的完整路径【免费下载链接】vectorizerPotrace based multi-colored raster to vector tracer. Inputs PNG/JPG returns SVG项目地址: https://gitcode.com/gh_mirrors/ve/vectorizer把一张 120px 的 PNG 图标投到 3 米外的 LED 屏上放大之后像素点清晰可见——这时候需要的就是一个多色位图转矢量工具vectorizer一个基于 Potrace 的 Node.js 库把 PNG/JPG 图像描摹成可无限缩放的 SVG。工具速览基于 Potrace 的多色位图转矢量库vectorizer 封装了potrace的 posterize分层量化描摹能力用sharp做像素级颜色分析输出前再经svgo压缩优化。它解决的是一个具体的问题把多色位图Logo、图标、简单插画转成可直接交付的多色 SVG全程本地运行不出网。适合需要把图片素材资产化的前端和 Node 开发者MIT 协议可以整体拷进项目git clone https://gitcode.com/gh_mirrors/ve/vectorizer cd vectorizer npm installAPI 只有inspectImage和parseImage两个函数用法如下节。核心 API 上手三个参数决定 SVG 质量最小可运行示例把icon.png和测试脚本放在 vectorizer 根目录用 node 直接跑// test.js import { inspectImage, parseImage } from ./index.js; // 让 vectorizer 采样主色给出一组候选参数 const options await inspectImage(icon); console.log(options); // 取第一个候选step 最少送入描摹器 await parseImage(icon, options[0].step, options[0].colors);inspectImage(imageName)对图像做主色采样默认取 5 色识别白底、黑白、单色图返回候选参数数组[{ step, colors }]。parseImage(imageName, step, colors)执行描摹。注意它接收的是文件名而不是路径png 必须放在当前目录结果直接写入./名字.svg不返回 SVG 字符串。关键参数逐个讲parseImage的三个实参与内部行为一一对应imageNamestring必填只有文件名不带目录、不带.png后缀。代码内部拼的是./name.png输出写到./name.svg。这里有个坑输入是 JPG 的话得先转成 PNG 再进来。stepnumber必填1~4potrace 的 posterize 分层数即灰度被量化成几档。1 表示单色描摹越大保留的颜色层越多。colorsstring[]必填各量化档位的调色板hex 字符串。step为 1 时只用colors[0]多色时长度应与step一致。inspectImage的返回字段stepcolors与这两项同构可以直接喂给parseImage。全部逻辑在根目录 index.js约 300 行看完没有黑盒。完整配置组合不依赖自动采样时手动指定全部参数import { parseImage } from ./index.js; // 3 档量化colors 里 3 个颜色按档位顺序对应 await parseImage(banner, 3, [#0b1f3a, #e34234, #f7f7f7]);内部还有两处固定行为optTolerance写死为 0.5potrace 容差越大轮廓越平滑、小细节丢得越多需要微调就改源码里的这个常量输出前自动走一遍svgo压缩并把svg标签的 width/height 换成viewBox——后者正是图能无损放大的原因。参数速查表参数类型默认值作用推荐取值范围imageNamestring必填当前目录下的图像名不带路径、不带扩展名输出写到./名字.svg已存在的 png 文件名stepnumber必填posterize 量化档位数1 表示单色描摹1简单单色~ 4多色colorsstring[]必填hex 调色板step为 1 时只使用colors[0]与step同长取自inspectImageoptTolerancenumber0.5内部固定potrace 容差越大越平滑、丢细节越多0.3 ~ 0.7改源码常量场景配方批量 PNG 转 SVG 的参数怎么选如果你要把单个 PNG 转成 SVG最快路径inspectImage拿候选第一个够用。执行前确认输入是 PNG跑完当前目录会多出同名 SVG直接拖进浏览器看轮廓对不对。import { inspectImage, parseImage } from ./index.js; const name icon; // 当前目录下须有 icon.png const options await inspectImage(name); // 只要求快取第一个候选step 最少 await parseImage(name, options[0].step, options[0].colors);如果你要让多色 Logo 的颜色尽量保真原图颜色层多step就该大inspectImage的候选按 step 递增排列最后一个颜色最多。纯黑白图只会返回一个step: 1的候选直接透传即可。品牌色输出后偏色一两度的话直接在 SVG 里全局替换 hex 值比继续调参数更可靠。import { inspectImage, parseImage } from ./index.js; const options await inspectImage(logo); // 纯黑白图只返回一个 step: 1 的候选 if (options.length 1) { await parseImage(logo, options[0].step, options[0].colors); } else { // 彩色原图取最后一个候选step 最多、量化色最多 const richest options[options.length - 1]; await parseImage(logo, richest.step, richest.colors); }如果你要把整个 assets 目录批量转 SVGparseImage只认当前目录批量做法就是逐个把 png 拷进工作目录、转换、再把 svg 挪到目标位置。fs-extra是 vectorizer 自身的依赖装完依赖就能直接 import。import { inspectImage, parseImage } from ./index.js; import fs from fs-extra; const dir assets/icons; const files fs.readdirSync(dir).filter(f f.endsWith(.png)); for (const file of files) { const name file.replace(/\.png$/, ); fs.copyFileSync(${dir}/${file}, ${name}.png); // 必须放进当前目录 const options await inspectImage(name); await parseImage(name, options[0].step, options[0].colors); fs.moveSync(${name}.svg, dist/${name}.svg); }如果要接进 CI 或构建脚本把给文件名、出 svg抽成脚本构建时按文件调用。CI 里就三步装依赖、跑脚本、把产物提交回仓库。// scripts/vectorize.js import { inspectImage, parseImage } from ./index.js; import fs from fs-extra; const name process.argv[2]; // 命令行传入文件名 const options await inspectImage(name); await parseImage(name, options[0].step, options[0].colors); fs.copyFileSync(${name}.svg, public/${name}.svg);命令行或 package.json script 里调用node scripts/vectorize.js logo node scripts/vectorize.js icon选型对比多色描摹、单色描摹与在线服务维度vectorizerpotrace CLI在线转换服务多色支持原生支持1~4 个颜色档仅单色视服务预设而定处理位置完全本地本地上传云端颜色保真像素最近色回量化不适用预览级配置灵活度step/colors 程序化指定命令行选项预设参数许可证MITGPL视服务而定只描单色线稿时potrace CLI 更轻、零依赖图里有多色、或品牌色必须精确的场景vectorizer 更合适——本地运行、参数可编程指定、MIT 协议可整体并入项目。在线服务适合一次性尝鲜长期交付的资产把描摹流程留在自己的流水线里更稳。常见问题依赖安装与参数踩坑Qnpm install 时报 sharp 相关错误sharp 带预编译二进制多数情况升级到 Node 16 再重装即可最小化 Linux 缺系统库时先装libvips42Debian/Ubuntu再重装。Q我传 JPG 为什么没反应代码内部按文件名拼.pngJPG 输入会静默找不到文件。先转换convert input.jpg input.pngQcolors 数组给满了输出却还是单色step为 1 时只使用colors[0]。把step提到与原图颜色数匹配或直接取inspectImage里对应档位的候选。QparseImage 没有返回值怎么拿 SVG 内容函数把结果写进./名字.svg并打印done。需要字符串就读文件import fs from fs; const svg fs.readFileSync(./logo.svg, utf8);Q输出颜色和原图有轻微偏差说实话这属于正常现象多色回量化取的是该色最接近像素群的中位代表值内部 quantize 只取 5 个主色结果是近似。关键品牌色偏色时输出后做全局 hex 替换即可。Q大尺寸图几百万像素的 PNG处理很慢posterize 和逐像素换色都随像素数线性增长。先用 sharp 缩到目标显示尺寸再描摹——矢量的好处正是之后还能放大。延伸方向换掉颜色量化策略index.js 里的replaceColors是多色描摹的核心中位量化对大面积渐变偏糙可以换成更稳的聚类算法。把预选逻辑搬上网页inspectImage的主色采样、白底识别、黑白判断都是纯逻辑适合做一个先选颜色档位、再描摹的前置界面。自动化选参inspectImage内部的色相/亮度差阈值hueDifference 5判单色可以直接复用成按原图复杂度自动选 step的判定器。打开 index.js 把replaceColors读一遍80 行比再翻三篇教程快。【免费下载链接】vectorizerPotrace based multi-colored raster to vector tracer. Inputs PNG/JPG returns SVG项目地址: https://gitcode.com/gh_mirrors/ve/vectorizer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考