拼豆图纸生成器

纯前端 · 把任意图片一键转成 Perler / Hama 拼豆像素图案
内置 MARD 221 色板 · 智能去背景 · 色号合并 · 导出 SVG / PNG / CSV

在线演示 / Live demo：https://ya-chang.github.io/bead-pattern-generator/

---

是什么

拼豆图纸生成器（Bead Pattern Generator）是一个零依赖、纯前端的工具：把一张图片转换成拼豆（Perler Bead / Hama Bead / 熔珠）的像素图纸。 所有计算都在浏览器本地完成，图片不会上传到任何服务器。

• 在线体验：克隆后直接用浏览器打开 index.html 即可，无需构建、无需后端。
• 关键词：拼豆 · Perler · Hama · 像素图 · 图纸生成器 · bead pattern · pixel art · image to pixel · MARD 221 · 去背景 · SVG 导出

功能特性

智能降采样：均值 / 主色 / 智能（边缘保主色）/ 像素图四种模式，按图选材。

感知级配色：以 CIEDE2000 色差在 MARD 221 色板里就近取色，还原更准。

自动去背景：角落采样 + 洪水填充 + Sobel 边缘保护，去掉纯色底。

色号合并：相似度合并 / K-Means 聚类 / 去杂点，减少用豆种类。

画布编辑：画笔 / 橡皮 / 吸管 / 填充，5 秒撤销，逐格微调。

三种导出：图纸 PNG、像素图 PNG、矢量 SVG，以及色号清单 CSV。

高列数不崩：水平格数可拉到 600 列仍清晰渲染、清晰导出。

明暗双主题：白底 + 粉红/蓝强调，跟随系统并可手动切换。

使用说明

1. 打开 index.html（双击即可，或拖入浏览器）。
2. 点击「选择图片」或把图片拖进画布区。
3. 调节水平格数（16–600）、降采样模式、色差算法、是否去背景。
4. 点「生成图纸」。需要更干净的结果就「应用合并 / 去除杂色」。
5. 右上角按钮可切换深色模式。
6. 导出：图纸 PNG / 像素图 PNG / SVG / 清单 CSV。

卡通、Logo、色块分明的图效果最好；格数越高用豆越多（100 列约 1 万颗，600 列约 36 万颗）。

技术栈

• 纯 HTML + CSS + 原生 JavaScript，单文件 index.html，零依赖、零构建。
• 渲染：Canvas（createImageData 离屏位图 + 最近邻放大），高列数下不挤压、不截断。
• 颜色科学：sRGB → Lab → CIEDE2000（ΔE00） 感知色差；5-bit 缓存加速取色。
• 设计语言：8pt 栅格、玻璃拟态、cubic-bezier(.25,.1,.25,1) 弹簧缓动、系统字体栈（-apple-system / PingFang SC）。

目录结构

perler/
├── index.html     # 应用本体（单文件，零依赖）
├── favicon.svg    # 项目图标（SVG）
├── LICENSE        # MIT
└── README.md      # 本文件

许可证

MIT —— 可自由用于个人与商业项目。