图片涂色编辑功能

<title>图片涂色编辑功能</title>

> 本文档抓取自官方文档中心（2026-10-10 快照），具体功能以实际产品为准。

# 图片涂色编辑功能

## 功能概述

图片涂色编辑功能允许用户在图片节点中直接对图片进行涂色修改，涂色后的图片将直接替换原图。适用于给黑白图上色、修改图片局部颜色、添加标记等场景。

## 使用方法

1. 在图片节点中上传或生成图片
2. 点击"涂色编辑"按钮打开涂色编辑器
3. 使用画笔在图片上涂色

   - 调整画笔大小（5-50px）
   - 选择颜色（支持预设颜色快捷选择和自定义颜色选择器）
   - 调整透明度（0-100%）
4. 支持撤销和清空操作
5. 点击"确认"按钮
6. 涂色后的图片自动上传并替换节点中的原图

## 技术实现

### 文件结构

- `web/video_workflow.html` - 涂色编辑模态框HTML结构
- `web/css/video_workflow.css` - 涂色编辑器样式
- `web/js/image_coloring_editor.js` - 涂色编辑器核心模块
- `web/js/nodes.js` - 图片节点集成

### 工作流程

1. **打开编辑器**：加载原始图片到Canvas，保存初始状态到历史记录
2. **用户涂色**：在Canvas上直接绘制/修改颜色，画笔光标实时跟随鼠标显示预览圆圈
3. **确认编辑**：将Canvas内容通过回调函数传递给调用方
4. **替换原图**：调用方将涂色后的图片上传并替换节点中的原图
5. **自动保存**：自动保存工作流

### API接口

使用 `/api/video-workflow/upload` 接口上传涂色后的图片：

```
POST /api/video-workflow/upload
Content-Type: multipart/form-data
Headers:
  Authorization: {auth_token}
  X-User-Id: {user_id}

参数：
- file: 涂色后的图片文件（PNG格式）

返回：
{
  "code": 0,
  "data": {
    "url": "涂色后的图片URL"
  },
  "message": ""
}
```

### 核心功能

#### Canvas绘制

- 支持鼠标和触摸事件（兼容移动端）
- 可调节画笔大小、颜色、透明度
- 预设颜色快捷选择（点击色块快速切换颜色）
- 画笔光标预览（圆形光标跟随鼠标，显示当前画笔大小和颜色，使用 `mix-blend-mode: difference` 确保可见性）
- 撤销功能（最多20步历史记录）
- 清空画布功能（保留原始图片作为背景）

#### 图片处理

- 自动适配图片尺寸
- 将Canvas转换为PNG格式
- 上传到服务器获取URL
- 直接替换节点中的图片

## 注意事项

1. 涂色编辑需要先有图片（上传或生成）
2. 涂色编辑器使用模态框展示，通过 `window.imageColoringEditor.open()` 打开
3. 涂色后的图片通过回调函数传递给调用方，由调用方负责上传和替换
4. 编辑成功后自动保存工作流
5. 涂色是在原图上直接绘制，不是AI生成新图
6. 编辑器通过 IIFE 模块化封装，自动在 DOM 加载完成后初始化

## 未来优化方向

- 支持橡皮擦功能
- 支持图层管理
- 添加更多画笔样式（如喷枪、模糊等）
- 支持导出涂色图