拼豆图纸生成器 🫘

把你家猫的照片，变成一份带色号、带坐标、带采购清单的拼豆施工图。

不用充会员，不用盯着 AI 转圈圈，图片拖进来就出图——因为所有计算都在你浏览器里跑完了，连网都不用。

这玩意儿是干嘛的

拼豆（有人叫它熨斗豆、融合豆、Perler beads）= 就是把彩色小塑料豆摆在钉板上，盖张纸拿熨斗一烫，豆子热融成一块像素画。

所以"把图变成拼豆图纸"这事，拆到底就两步：

1. 把图糊成马赛克（像素化）
2. 把每个像素的颜色，贴到豆子真实有的颜色上

本工具就是干这个的。外加把背景抠了、把豆子按色号数好、画上坐标网格、生成采购清单—

豆子尺寸速查

规格	直径	一句话
mini 小豆	2.6mm	搞精细的、头像、动漫角色。本工具默认。
midi 中豆	5mm	街上最常见那种，钥匙扣杯垫。
maxi 大豆	~12mm	给小朋友玩的超大像素。

⚠️ 三种豆子和模板不能混用。同面积下 mini 能塞的豆约是 midi 的 4 倍。 常见图纸格数：30×30 / 50×50 / 60×60。本工具宽默认 50，高度跟着原图比例走。

用法（真的就这么几步）

1. 浏览器打开 index.html（Chrome / Edge / Safari 都行，断网也能用）
2. 把图拖进去，或者点选择文件
3. 拉拉参数：图纸宽 / 豆规格 / 最大色数 / 标题
4. 点 下载施工图 PNG / 下载色卡 PNG / 复制采购清单

完事。图不会传到任何服务器，全依靠你的电脑里简单计算

它替你做了 PDF 里要求的所有事

• 宽 50 格 × 高自适应（可改 8–120）
• 2.6mm mini（可切 5mm midi）
• 标准色卡，最多 16 色纯色（可改 8 / 12 / 16 / 24）
• 每格一种纯色，无渐变、无柔边
• 自动抠纯色背景（透明 PNG 也认）
• 施工主图：标题 + 横纵坐标编号 + 格内色号 + 每 10 格粗辅助线
• 色卡清单：色块 / 色号 / 名 / 数量 + 总豆数 + 宽高 + 色数，按色号排序，可一键复制

稍微正经一点的技术说明

• 颜色匹配用 CIELab ΔE，不是 RGB 欧氏距离。差别在哪：橙红不会被误认成棕色。
• 量化用中位切割，保证主体色不被砍掉。
• 纯前端，零依赖，双击 HTML 即跑。

文件长这样：

pindou-maker/
├── index.html
├── style.css
├── js/
│   ├── palette.js    色卡（换成官方卡改这里就行）
│   ├── colorlab.js   sRGB→Lab + 最近色
│   ├── quantize.js   中位切割量化
│   ├── render.js     施工图 / 色卡渲染 + 下载
│   └── app.js        主流程：上传→像素化→抠图→量化→映射→渲染
├── test.html / test_app.html   自检（注入测试图跑全流程）
└── README.md         就是你正在看的

想要官方色卡？

js/palette.js 里现成的是按 Mard 常用色区间整理的代表色。哪天拿到官方 RGB 色卡，按 { code, name, hex } 替换那个数组，其余代码一行不用动。

License

MIT——拿去用，拿去改，拿去赚钱。卖图纸赚到钱了记得请我喝杯奶茶（开玩笑的，不用hhh