Perler Beads Generator 拼豆底稿生成器
一款开源的拼豆图纸生成器，可将任意图片自动转换为拼豆底稿。支持多品牌色号适配、杂色清理、背景移除与采购清单导出，浏览器端即可完成全部图像处理。
爱鲜报评分
0 人评分
1k
星数
是
中文
TypeScript
主语言
是
活跃
5
贡献者
人工分析
EDITORIAL推荐理由
手作拼豆爱好者与前端图像处理学习者的实用工具。项目用 Next.js + TypeScript + Canvas 实现了完整的像素化与颜色映射算法，代码结构清晰、算法说明详尽，适合作为浏览器端图像处理的学习范例。已获千星，社区活跃且持续迭代。
适用场景
- 拼豆爱好者将照片、动漫图转换为可打印图纸
- 手工店/工作室批量生成拼豆底稿与采购清单
- 前端开发者学习 Canvas 图像处理与颜色量化算法
- 作为像素画、十字绣等网格类手作的参考实现
优点
- 内置 MARD、COCO、漫漫、盼盼、咪小窝五大品牌色号体系，覆盖 291 种标准颜色
- 主导色提取 + BFS 连通区域合并 + 洪水填充背景移除，算法链路完整且文档清晰
- 支持手动精修、颜色排除重映射，导出图纸与采购清单一步到位
- 纯浏览器端 Canvas 处理，无需上传图片，隐私友好
- AGPL-3.0 开源，算法细节全部公开
缺点
- 当前使用 RGB 欧氏距离，色彩还原精度不如 CIEDE2000 等感知色差算法
- 大尺寸图片在浏览器主线程计算，性能可能受限（Web Workers 仍在 Roadmap）
- 暂不支持自定义调色板上传，色板扩展需改源码
- AGPL-3.0 对闭源商用有较强约束，商业集成需注意合规
项目简介
Perler Beads Generator（拼豆底稿生成器）是一个开源的在线工具，能把任意图片一键转换成拼豆（Perler Beads）底稿。项目由 Zippland 开发并永久开源，提供移动端与桌面端两个入口：移动端适合快速出图，桌面端提供完整工作台用于精细编辑。
核心功能
- 智能像素化：基于主导色提取，避免传统均值池化产生的灰色毛边
- 多色板适配：内置 MARD / COCO / 漫漫 / 盼盼 / 咪小窝 五大品牌色号，支持 168 / 144 / 96 等规格
- 自动颜色合并：BFS 连通区域检测配合可调相似度阈值，清理杂色
- 背景智能移除：边界洪水填充自动剥离外部背景
- 颜色排除与重映射：排除不想要的颜色并自动映射到最近似可用色
- 手动精修：支持逐格着色修改
- 导出图纸与采购清单：生成带色号与网格线的 PNG，并统计各色用量
技术栈
| 层 | 技术 |
|---|---|
| 框架 | Next.js (React) + TypeScript |
| 样式 | Tailwind CSS |
| 图像处理 | Canvas API（浏览器端） |
| 部署 | Vercel |
核心算法思路
颜色映射
对每个网格单元提取原图对应区域中出现频率最高的像素 RGB 值（主导色），再用欧氏距离映射到当前色板中最接近的颜色。
区域合并
从任一未访问单元格出发做 BFS，将欧氏距离小于阈值的邻近单元格聚合为连通区域，统一取区域内出现最多的色号，显著减少杂色。
背景移除
定义背景色号列表，从所有边界单元格执行洪水填充，标记与边界连通且属于背景色的单元格为“外部”，统计与导出时忽略。
颜色排除
在未被排除的颜色子集中寻找最近似替代色进行重映射，恢复颜色时触发完整重处理。
本地运行
git clone https://github.com/Zippland/perler-beads.git
cd perler-beads
npm install
npm run dev
随后在浏览器打开 http://localhost:3000 即可。
调色板数据
色板定义位于 src/app/colorSystemMapping.json，包含 291 种标准颜色到 5 个品牌色号体系的完整映射；色板组合在 src/app/page.tsx 的 paletteOptions 中配置。
Roadmap
- CIEDE2000（Delta E）颜色距离算法替代 RGB 欧氏距离
- Floyd-Steinberg 抖动，在有限色板下模拟更丰富过渡
- Web Workers 后台计算，优化大图性能
- 用户自定义调色板上传
- 微信小程序版本
许可证与共创
项目采用 AGPL-3.0 许可，作者公开全部算法细节与源码，欢迎学习、使用与改进，但请勿抄袭后包装为闭源商业产品。
评论
- 暂无评论，来写第一条吧。