豆豆你呀

一个开源的拼豆图纸颜色高亮工具。上传拼豆图纸图片，选择色号，即可高亮对应颜色区域，帮助你快速定位每一颗豆子的位置。

免费、开源、社区驱动。

功能

• 图片上传 — 支持拖拽或点击上传拼豆图纸（本地处理，图片不会上传到服务器）
• 色号选择 — 内置拼豆色卡，按系列/编号快速选取目标颜色
• 颜色高亮 — 选中色号后，图纸中匹配区域高亮显示，其余区域压暗
• 匹配范围调节 — 滑动条控制颜色匹配阈值，适应不同清晰度的图纸
• 渲染设置 — 背景亮度调节、色块描边（宽度/颜色可调）
• 多色号管理 — 支持同时选择多个色号，点击切换查看，独立保存各自的匹配范围
• 画布缩放 — 自由缩放图纸，精细查看局部区域
• 响应式布局 — 适配桌面与移动端

使用方式

在线使用

直接访问部署页面即可使用（无需注册、无需安装）。

本地运行

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览构建产物
pnpm preview

技术说明

层面	技术
框架	React 19 + TypeScript
构建	Vite
包管理	pnpm
图像处理	Canvas API（纯前端，无后端依赖）

核心流程：

1. 用户上传图片 → Canvas 提取像素数据
2. 选择目标色号 → 逐像素计算颜色距离，生成匹配 mask
3. mask 后处理（形态学闭运算 / 填洞 / 去噪）→ 生成高亮渲染结果
4. 可选描边渲染 → 输出最终显示画面

所有计算在浏览器本地完成，不依赖任何后端服务。

开源协议

本项目代码采用 AGPL-3.0 协议开源。

允许：

• 学习、阅读源码
• 修改代码
• 分发副本
• 提交贡献

要求：

• 基于本项目代码提供网络服务时，需遵守 AGPL-3.0 要求，公开对应源码。

品牌声明

「豆豆你呀」名称、Logo、相关视觉设计和品牌资产不包含在 AGPL-3.0 授权范围内。开源协议仅适用于代码。

未经授权，不得使用"豆豆你呀"名称或 Logo 创建官方衍生项目或造成官方关联误导。