把任意图片变成可直接照着拼的 拼豆图纸:自动网格化、像素化,并把每个格子的颜色映射到 MARD 221 色 真实色号,一键导出带色号的图纸与用豆统计,方便照着拼和采购材料。
✨ 单文件 · 离线可用 · 图片完全在本地处理,不上传服务器
| 功能 | 说明 |
|---|---|
| 🖼️ 图片上传 | 点击选择 / 拖拽 / Ctrl+V 粘贴,支持任意常见图片格式 |
| 🔲 网格自定义 | 输入宽度格数,高度按图片比例自动计算(也可手动指定);预览格大小可调 |
| 🎨 色号映射 | 每格颜色经 CIE Lab 感知色差匹配到最近的真实 MARD 色号(221 色) |
| 🔄 双模式预览 | 「拼豆色号」/「原图色」一键切换对比 |
| 🎚️ 效果调整 | 亮度 / 对比度 / 饱和度,让照片更适合做拼豆 |
| 📐 显示选项 | 网格线、格内色号、行列坐标轴 均可开关 |
| 📊 用豆统计 | 每种色号的颗数与占比,支持导出 CSV / 复制文本 |
| ⬇️ 图纸导出 | 高清 PNG 图纸(可含色号与网格线,每格像素可设),直接打印 |
| 🎨 色板参考 | 内置完整 MARD 221 色板图例,点击色号即可复制 |
无需安装、无需联网。直接下载 index.html,用浏览器打开即可:
双击 index.html, 或拖入浏览器地址栏
- 上传图片 — 把图片拖进左侧区域(或点击选择、
Ctrl+V粘贴) - 设置网格 — 输入宽度格数(如 50 表示宽 50 格),高度自动按比例计算
- 调整效果 — 按需调节亮度/对比度/饱和度,预览「拼豆色号」效果
- 查看统计 — 右侧自动列出每种色号的用豆数量与占比
- 导出图纸 — 点「导出图纸 PNG」得到高清图纸,「导出统计 CSV」用于采购备料
💡 预览时勾选「显示行列坐标」,图纸边缘会出现行列号,拼图定位更方便。
| 文件 | 说明 |
|---|---|
index.html |
全部功能所在(HTML + CSS + JS + 内置色板,单文件) |
README.md |
本说明 |
mard-221-colors.json |
MARD 221 色原始数据(来源仓库格式,供参考/更新) |
palette-embed.json |
压缩后的内嵌色板数据(构建 index.html 时注入用) |
- 仓库: HansBug/pindou-color-data
- 系列: MARD家 221 色(
mard-221-alfonse-doudou,Alfonse + 豆豆工坊核对版) - 评级: 国内手工小店主流度 S / 5.0,国内最主流 / 默认参考体系
⚠️ RGB 为屏幕参考值,严谨对色请以实物色卡为准
网格设多大合适?
建议 ≤ 20 万格(如 400×500)保证流畅;小图(如头像)50100 格即可,大图(风景照)可到 200300 格。超大网格会自动提示。
格子里色号显示不出来? 预览格大小 ≥ 12px 时才会显示色号;导出图纸默认每格 40px,色号清晰可打印。也可以把「预览格大小」滑块调大。
图纸打印多大? 导出时「图纸每格像素」决定清晰度(默认 40px/格)。按 MARD 2.6mm 豆估算,图纸尺寸会显示在左侧「成品尺寸」一栏。
想换别的品牌色板怎么办?
index.html 顶部的 PALETTES 对象预留了多色板结构,可参照 HansBug/pindou-color-data 的其他系列(COCO、漫漫家、优肯等)自行添加。
MIT © Zly