---
date: 2026-06-16
version: V1.2.0
tag: V1.2.0
commit: 1176731dfbd6536a8f90ba23f5e25c9071b27fa1
author: William
license: MIT
---

V1.2.0 让设计器第一次具备「**描摹真实图片**」的能力——直接在背景图上画拼豆，再也不用来回切窗口对照。

### 1. 设计页导入背景图片

- 设计器工具栏新增「**导入背景图**」按钮。
- 支持 JPG / PNG / WebP / GIF，单张 ≤ 5MB。
- 背景图作为**最底层图层**渲染，拼豆网格叠加在上方。
- 导出 PNG / PDF 时可选择「**是否包含背景图**」，灵活输出。

### 2. 背景图透明度可调

- 滑块控制 0% ~ 100% 透明度。
- 0% 完全透明，背景仅作为构图参考。
- 100% 完全不透明，背景图与画布融为一体。
- 推荐设置：描摹阶段 30%~50%，核对阶段 0%。

### 3. 自动识别背景图比例

- 上传图片后，**自动按图片宽高比**调整画布尺寸。
- 支持自定义目标尺寸（小 29×29 / 中 52×52 / 大 78×78 / 超 104×104）。
- 识别完成后一键「应用到画布」，所见即所得。

### 4. 取色器支持图层选择

- 取色器新增选项：**取拼豆图层色** / **取背景图片色**。
- 画拼豆时：取拼豆图层色，方便修改既有图案。
- 描摹背景时：取背景图片色，一键吸色不用反复切换。
- 选项记忆在本地，下次打开自动恢复。

1. 设计器 → 工具栏 → 「导入背景图」。
2. 选择一张想描摹的图片 → 自动识别比例 → 调整到目标尺寸。
3. 调低透明度（推荐 40%），开始用画笔 / 填充沿轮廓上色。
4. 取色器切换为「取背景图片色」，吸色后用画笔 / 填充继续。
5. 完成描摹后，**隐藏背景图**导出最终 PNG / PDF。

- 背景图采用**单独 Canvas 层**渲染，与拼豆图层解耦。
- 取色器通过 `getImageData` 读取像素，**0 延迟**反馈 RGB。
- 自动比例识别在前端完成，无需上传服务器。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。