起因是家里人玩拼豆，找图纸的路径基本是：别人做好的现成图纸，或者网上一些收费/满屏广告的在线工具，体验都不太行。正好自己会点前端，就花时间做了一个拼豆图纸生成器，主打「上传任意图片 → 自动生成可拼的图纸」，自用顺手后开源出来分享给大家。 在线使用： https://perler.phtbyte.com/ 源码（ MIT ）： https://github.com/pht1991/perler-blueprint 纯前端，无账号无后端，图片不上传服务器，所有数据存 localStorage 。
能做什么
- 上传图片自动量化到真实拼豆色板：内置 MARD / COCO / 漫漫 / Perler / Hama / Artkal 等 25 块板共 3759 色，按 Lab 色彩空间做最近色匹配
- 限色：k-means （ Lab 空间，k-means++ 初始化，固定种子保证同图同结果）把颜色压到指定数量
- 2D 图纸 + Three.js 3D 豆板（圆柱珠子 + 钉板底座），3D 下还能按图片明暗堆成立体分层
- 编辑模式：画笔 / 填充 / 橡皮 / 取色 + 撤销重做，孤立散珠一键清除（实操中单颗珠很难固定）
- 海报导出（ PNG / PDF ）、批量导出（全部规格合集 PDF + 配色统计 CSV ，直接照着买豆子）
- 单文件 HTML 导出：当前图纸 + 源图 + 拼豆进度全部写进一份 HTML 文件，发给朋友或自己存网盘，打开就能继续拼，进度都在
- 中 / EN 双语，移动端手势适配（捏合缩放），iOS 走系统分享面板可存相册 一些技术细节 技术栈：Vite + TypeScript + Three.js + jspdf ，构建用 vite-plugin-singlefile 打成单文件。 最曲折的是「单文件 HTML 自导出」：把当前页面连同存档序列化成一份新 HTML 。最初用正则替换存档节点，结果 vite 压缩后的 bundle 里恰好含有存档注入点的模板字符串，正则先匹配到了它，把大段初始化代码替换成了 JSON ，导出文件直接白屏。后来改成 DOM 方式（ cloneNode 后改写真实节点的 textContent 、剥掉外部脚本引用、手动补 doctype ）才彻底解决——正则处理 HTML 这个教训算是身体力行地体会了一遍。 色板匹配没有用 RGB 欧氏距离，而是转 Lab 后算 ΔE76 ，肉眼观感准很多；量化阶段如果要限色，用固定种子的 k-means 做语义聚类而不是简单按数量截断，避免把渐变区域的中间色砍掉后出现脏色。
求反馈 功能上暂时够用，感兴趣的可以玩玩，欢迎提 issue 或直接回复建议。特别想听两类反馈：一是量化选色有没有跑偏的情况（最好带上原图和规格）；二是单文件导出在你设备上打开是否正常。
Select Language