拼豆工作室（PinDou Studio）

将普通图片快速转换为可用于拼豆创作的网格图纸。

拼豆工作室是一个运行在浏览器中的图片转拼豆图纸工具。选择图片、设定豆板尺寸与色板精度后，即可获得带颜色用量统计的拼豆图纸。所有图像处理都在本地完成，不会上传您的图片。

功能

• 支持 PNG、JPG 和 WEBP 图片上传，也支持拖拽上传。
• 豆板最长边可在 16–512 格 之间自由调整，横图与竖图都会按比例生成。
• 支持 16 / 24 / 32 / 64 色 拼豆色板。
• 采用 CIE Lab* 感知色彩空间进行邻近色匹配，结果更符合人眼感知。
• 提供“平均取色”与“中心取色”两种采样方式。
• 支持显示网格线、缩放预览、颜色用量统计及排序。
• 可导出带坐标与颜色图例的 PNG 图纸。
• 可下载 CSV 用料清单，方便备料。

快速开始

环境

请先安装 Node.js。

npm install
npm run dev

启动后，在浏览器中打开终端显示的本地地址即可使用。

生成生产版

npm run build
npm run preview

构建结果会输出到 dist/ 目录。

使用方法

1. 点击上传区域，或将图片拖入上传区。
2. 设定“最大边长”：这个值决定图纸最长一边的拼豆数量。
3. 选择色板精度（最高 64 色）和采样方式。
4. 点击“生成拼豆图纸”查看结果。
5. 在右侧查看每种颜色的用量，或导出 PNG 图纸和 CSV 清单。

项目结构

.
├── src/
│   ├── main.js       # 图像处理、配色匹配、导出与交互逻辑
│   └── style.css     # 响应式界面样式
├── index.html        # 应用入口
├── preview.jpg       # 项目预览图
└── package.json      # 脚本与依赖配置

隐私

图片仅会在您的浏览器内存中解析、转换和导出。本项目不包含后端图像上传或云端存储功能。

许可证

本项目以 MIT 许可证开源发布。

Brand palette and bead-code mapping

PinDou Studio now maps every generated color to a real ARTKAL S 5 mm product code (S01–S64). The materials panel, PNG legend, and CSV export all include the bead code so you can prepare the correct beads.

Screen swatches are digital reference colors only. Check a physical ARTKAL swatch card before ordering, because screen calibration and manufacturing batches can vary.