本文档抓取自官方文档中心（2026-10-10 快照），具体功能以实际产品为准。

图片涂色编辑功能

功能概述

图片涂色编辑功能允许用户在图片节点中直接对图片进行涂色修改，涂色后的图片将直接替换原图。适用于给黑白图上色、修改图片局部颜色、添加标记等场景。

使用方法

1. 在图片节点中上传或生成图片
2. 点击"涂色编辑"按钮打开涂色编辑器
3. 使用画笔在图片上涂色

• 调整画笔大小（5-50px）
• 选择颜色（支持预设颜色快捷选择和自定义颜色选择器）
• 调整透明度（0-100%）

1. 支持撤销和清空操作
2. 点击"确认"按钮
3. 涂色后的图片自动上传并替换节点中的原图

技术实现

文件结构

• 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 加载完成后初始化

未来优化方向

• 支持橡皮擦功能
• 支持图层管理
• 添加更多画笔样式（如喷枪、模糊等）
• 支持导出涂色图