🟦 拼豆图纸生成器

将任意图片一键转换为拼豆（Perler Beads）图纸的网页工具，专为手工爱好者设计。

功能特性 · 快速开始 · 使用指南 · 算法原理 · 截图

---

从左到右：原始最近邻算法 → CleanBlock v1（过度平滑） → CleanBlock v7.5（最终方案）

✨ 功能特性

• 🎨 智能量化 — 专为拼豆优化的 CleanBlock v7.5 算法，在「干净无杂色」和「保留细节」之间取得平衡
• 🧩 多品牌支持 — Perler / Hama / Artkal 三大品牌官方调色板
• 📐 自由尺寸 — 16×16 ~ 256×256 格数可调，保持原图比例
• 🔧 交互编辑 — 画笔 / 吸管 / 填充桶工具，支持撤销/重做
• 🔲 多样样式 — 方形、圆形、圆角、菱形四种拼豆形状；细线、粗线、十字、无网格四种网格样式
• 📊 用量统计 — 自动生成颜色用量清单，支持导出 CSV
• 💾 导出图纸 — 高清 PNG 导出，可直接打印制作
• ⚡ 纯前端运行 — 无需服务器，打开即用，图片不上传云端

🚀 快速开始

方式一：直接打开（推荐）

git clone https://github.com/yourusername/perler-pattern-generator.git
cd perler-pattern-generator
# 直接用浏览器打开 index.html

或使用任意本地静态服务器：

# Python 3
python -m http.server 8080

# Node.js
npx serve .

# VS Code Live Server 插件

然后在浏览器中打开 http://localhost:8080。

方式二：在线使用

将本项目部署到 GitHub Pages / Vercel / Netlify 等静态托管平台即可在线使用。

本项目为纯静态网页，无需后端环境，部署极其简单。

📖 使用指南

1. 上传图片 — 点击「上传图片」按钮或拖拽图片到左侧区域
2. 选择品牌 — 根据你使用的拼豆品牌选择 Perler / Hama / Artkal
3. 调整尺寸 — 拖动滑块设置图纸格数（常用 48×48 / 61×64 / 80×80 等）
4. 生成图纸 — 点击「生成图纸」按钮，自动转换为拼豆配色
5. 手动微调 — 使用画笔/吸管/填充工具修正不满意的位置
6. 导出制作 — 导出 PNG 图纸打印，或导出 CSV 查看颜色用量采购拼豆

快捷键

按键	功能
B	画笔工具
I	吸管工具
F	填充工具
Ctrl + Z	撤销
Ctrl + Y	重做

🧠 算法原理

拼豆图纸的核心挑战：低分辨率下「去噪」和「保细节」是矛盾目标。

本项目经过 7 轮算法迭代，最终采用 CleanBlock v7.5 方案：

1. 极值感知降采样 — Area Average 保留整体色调，同时记录区域内最小/最大亮度，用于检测高对比区域（如眼睛黑白对比）
2. 硬匹配量化 — 根据亮度/色相规则将像素强制映射到合适的颜色区间，避免黄褐色误匹配绿色、暗色误配浅色等问题
3. 特征保护掩码 — 预先标记黑色轮廓、红色脸颊、白色高光等已知应保护的特征，防止去噪时将其平滑
4. 保守去噪 — 仅对未保护的孤立像素进行众数替换，清理杂色同时保留关键细节
5. 绿色后处理 — 清除孤立的绿色杂点（低分辨率下常见的噪色问题）

相比传统最近邻算法（全身 300+ 孤立杂色点），CleanBlock v7.5 能生成干净且保留眼睛、轮廓、脸颊等关键特征的拼豆图纸，大幅减少手工清理工作量。

📜 查看完整算法演进历史（点击展开）

阶段	算法	结果
初始	7 种传统算法（最近邻、Floyd-Steinberg、Bayer 抖动等）	全部因产生随机斑点被否决
v1	最近邻 + 保守去噪	极其干净，但丢失眼睛/脸颊/轮廓
v2~v6	边缘检测/方差掩码/硬匹配等多种保护策略	孤立点反弹，噪声重现
v7.5	保护掩码 + 极值感知 + 公平高对比判断	平衡方案，保留细节同时控制噪声

📸 截图

Perler 品牌效果（61×64）

Artkal 品牌效果（61×64）

📁 项目结构

.
├── index.html          # 主页面
├── css/
│   └── style.css       # 样式
├── js/
│   ├── editor.js       # 编辑器主逻辑（UI 交互、导出）
│   ├── palette.js      # 调色板数据（Perler/Hama/Artkal）
│   └── quantize.js     # CleanBlock 量化算法核心
├── package.json        # 仅含 Jimp 依赖（用于 Node.js 离线测试）
└── README.md

🛠 技术栈

• 前端：原生 HTML5 + Canvas + ES Modules（零构建步骤，零框架依赖）
• 颜色科学：CIEDE2000 Lab 色差（比 RGB 欧氏距离更符合人眼感知）
• 测试：Node.js + Jimp，离线指标验证

🌐 浏览器支持

• Chrome / Edge / Firefox / Safari 等现代浏览器
• 需要支持 ES Modules 和 Canvas
• IE 不支持

📄 License

MIT

---

制作拼豆时，建议先用 61×64 或更小的尺寸测试效果，确认后再放大制作。祝你拼豆愉快！🧩