在线演示：https://yooooo.us/pdd/

一个基于 Bun、React、TypeScript、Tailwind CSS、Radix UI 与 Rust/WASM 的前端工具，用来把图片转换成拼豆图纸，并在网页里继续编辑、查看、计时与导出。

许可证：

• GPLv3 正文见 LICENSE
• 中文附加使用说明（含不可商用提示）见 LICENSE.zh-CN.md

• 全部处理都在浏览器内完成，不依赖后端服务
• 支持导入普通图片，也支持导入现有图纸
• 首页支持点击选择图片，也支持拖拽上传
• 自动识别像素图与图纸棋盘区
• 自动检测主路径使用 Rust/WASM 检测器
• 支持手动裁切、手动网格、跟随图片比例
• 支持多种拼豆色系，不只限于 MARD
• 支持颜色归并、低频杂色吸附、预锐化
• 支持像素级编辑、撤销重做、画笔、橡皮、吸管、油漆桶、平移、缩放
• 支持拼豆模式高亮单色、全屏查看、计时器、翻转、显示颜色名称、底纹与豆子形状切换
• 支持导出带元数据的 PNG，重新导入时可直接读取，不必重新判格

• Bun
• Vite
• React
• TypeScript
• Tailwind CSS
• Radix UI
• Lucide React
• Rust + WebAssembly

安装依赖：

bun install

启动开发环境：

bun run dev

构建前端：

bun run build

单独构建检测器 wasm：

bun run build:detecter

本地预览构建结果：

bun run preview

运行测试：

bun run test

构建时可通过 PINDOU_BASE_PATH 指定基础路径：

PINDOU_BASE_PATH=/your/sub/path bun run build

未指定时默认使用相对路径，适合直接部署到子目录。

1. 打开页面后，在首页导入图片或现有图纸。
2. 导入完成后进入完整工作区。
3. 左侧用于原图、裁切与图片处理。
4. 右侧可在 画图图、拼豆豆、导出出 三个选项卡间切换。
5. 在 导出出 中设置标题、水印、参考线、底纹、色卡与元数据，再导出 PNG。

• 自动检测像素图与图纸
• 图纸检测返回棋盘内框与格子数量
• 自动检测失败时可切换手动网格
• 手动裁切后会基于裁切区域重新处理
• 原图标题区会显示当前识别结果：图纸 / 像素图 / 图片

• 自动识别或手动指定网格
• 手动裁切与重置裁切
• 归并近似颜色
• 低频颜色吸附
• 普通图片像素化
• 预锐化

• 默认支持 MARD 221
• 也支持 MARD Full 与其它拼豆色系映射
• 颜色相似度内部使用 OKLab
• 自动保留空白背景与实际颜色的区别

• 工具：画笔、橡皮、吸管、油漆桶、平移、缩放
• 撤销 / 重做
• Ctrl/Cmd + Z 撤销
• Ctrl/Cmd + Y / Cmd + Shift + Z 重做
• Ctrl/Cmd + 鼠标滚轮 缩放编辑画布
• 按住 Space 临时进入平移
• 按住 Alt 临时进入吸管
• 支持移动端触控绘制
• 支持水平翻转
• 可在颜色详情里直接整批替换颜色

• 显示不可编辑的拼豆图纸视图
• 点击颜色或格子可高亮单色
• 支持普通视图与全屏视图
• 移动端点击全屏时会同步进入浏览器全屏
• 支持缩放、滚轮缩放、触控缩放、拖拽平移
• 支持显示 / 隐藏颜色名称
• 支持豆子形状切换：方块 / 圆圈
• 支持底纹主题：无底纹、灰色、绿色、粉色、蓝色
• 支持开始 / 暂停 / 重置计时器
• 支持水平翻转

• 导出文件名默认为 【拼豆豆】原始文件名.png
• 导出的 PNG 带品牌标题、logo、色系信息、总颗粒数、颜色统计
• 可选写入 pindou-chart 元数据
• 再次导入我们自己导出的图纸时，会优先直接读取元数据，不再重新 parse 图片

• 顶部：品牌、主题切换、语言切换
• 左侧：原图、裁切、图片处理
• 右侧：画图图 / 拼豆豆 / 导出出

src/
  components/     界面组件
  data/           调色板与色系映射数据
  lib/
    chart-processor.ts   图像处理与导出主链
    chart-png.ts         PNG 元数据读写
    detecter.ts          wasm 包装
    editor-utils.ts      编辑辅助逻辑
    i18n.ts              多语言文案
  wasm/           wasm 产物
  App.tsx         页面主状态与流程编排
detecter/
  src/            Rust/WASM 检测器
images/           README 预览图
tests/            自动检测与导入导出回归测试

当前测试主要覆盖：

• 自动检测图纸 / 像素图
• 若干真实 fixture 的格子数量与裁切区域
• 导出带元数据的 PNG 再导入时可直接读取，不重新 parse

运行单测：

bun test tests/chart-processor.test.ts

• 自动检测并不能覆盖所有输入图片
• 某些第三方导出图纸仍可能需要手动裁切或手动网格辅助
• 超大图片在浏览器端处理时仍可能比较慢
• 当前检测精度仍在持续收敛