如果你在用 ComfyUI 做图像生成，你可能经历过这些场景：
- 想修改一张草图，却要先导出 PNG、再上传到工作流；
- 调整提示词后重新运行，发现画布状态没保存；
- 多层编辑、撤销操作只能靠外部工具完成；
现在，一个原生集成方案来了。
Comfy Canvas 是一个现代的多层 Web 画布工具，通过一个轻量级 Flask 服务桥接浏览器与 ComfyUI，实现实时绘图输入 + 图像结果回传。它以两个简单节点嵌入你的工作流，无需复杂配置即可启用交互式编辑体验。
当前版本为 Beta v0.1.1，已修复关键显示问题并增强数据健壮性，正式支持包括 Seedream 4.0 在内的主流模型输出。
新增功能（v0.1.1）
✅ 修复 ByteDance Seedream 4.0 输出异常问题
此前部分模型输出在前端显示为灰度或带扫描线。本次更新通过对张量标准化处理，并统一从输出节点发送标准 PNG 数据，确保色彩空间一致性。
✅ 增强数据校验机制/push/output 接口现已拒绝格式错误的 base64 负载，防止过时或损坏帧污染画布，提升稳定性。
核心功能一览
🎨 多层绘图编辑器（基于 PIXI.js）
- 支持画笔、橡皮擦、套索选择、自由变换
- 图层混合模式、透明度调节
- 本地图片上传、多步撤销/重做
- 实时预览与流畅交互
🔁 双向实时通信
- 输入：将画布图像 + 提示词 + 参数（强度、种子等）一键推送到 ComfyUI
- 输出：生成结果自动流式返回，直接叠加显示在画布上
⚙️ 自动运行（Auto-run，可选）
即使 ComfyUI 页面处于后台，点击“生成”也能触发 /prompt 请求，无缝衔接生成流程。
🔗 深度 ComfyUI 集成
- 支持通过 UI API 或直接调用
/prompt自动排队 - 兼容
client_id，支持多用户会话隔离 - 可选 base64 编码传输，适配不同节点需求
节点说明
▶️ Comfy Canvas - Edit（输入节点）
输出五项数据：
IMAGE：当前绘制的画布图像（RGBA）STRING：正向提示词STRING：负面提示词FLOAT：强度值（0~1，常用于去噪控制）INT：随机种子（最大支持 15 位数字）
可连接至 VAE 编码器、CLIP 文本编码、采样器等标准模块。
◀️ Comfy Canvas - Output（输出节点）
接收最终生成图像（支持 IMAGE 张量或标准化 base64），自动推送至前端展示。
只需将你的输出图像连到这里，结果就会实时出现在网页画布中。
快速上手指南
步骤 1：启动 ComfyUI
正常运行你的 ComfyUI 实例（默认端口 8188）。
步骤 2：启动 Comfy Canvas 桥接器
打开终端，进入插件目录：
Windows (PowerShell):
cd <ComfyUI root>\comfyui\custom_nodes\comfy_canvas
python cc_bridge_server.py
服务默认运行在：http://127.0.0.1:8765
（端口可通过环境变量自定义）
📌 停止服务：终端按 Ctrl+C，或发送 POST 请求至 /shutdown
步骤 3：添加节点并连接工作流
在 ComfyUI 中添加：
- Comfy Canvas - Edit
- IMAGE → VAE Encoder 输入
- prompt/negative → CLIPTextEncode 对应字段
- strength → 去噪强度（如 KSampler）
- seed → 采样器 seed 字段
- Comfy Canvas - Output
将最终生成图像连接至此节点。
步骤 4：打开前端开始创作
访问：http://127.0.0.1:8765
在左侧画布上绘画，填写提示词，点击“生成”——你的工作流将自动执行，结果实时返回。
💡 小技巧：
Edit 节点右侧面板可查看桥接器状态，并一键跳转前端页面。
自定义配置（环境变量）
启动前可通过设置以下变量调整行为：
| 环境变量 | 说明 | 默认值 |
|---|---|---|
CC_BRIDGE_PORT | 桥接器端口 | 8765 |
CC_BRIDGE_HOST | 绑定主机 | 127.0.0.1 |
CC_FRONTEND_DIR | 前端资源路径 | 内置 |
COMFY_URL | ComfyUI 地址 | http://127.0.0.1:8188 |
CC_AUTORUN | 是否启用自动运行 | 1（开启） |
CC_DUMP_OUTPUT | 是否保存输出 PNG 到磁盘 | false |
⚠️ 遗留变量
LD_*仍兼容，建议迁移到新命名规范。
HTTP 接口列表（桥接器）
| 方法 | 路径 | 功能 |
|---|---|---|
| GET | /status | 返回运行状态（含计数器、时间戳） |
| POST | /push/input | 提交绘图+参数（multipart 或 JSON） |
| GET | /get/input | 获取最新输入图像（PNG） |
| GET | /get/prompt | 获取最后提交的提示词与参数 |
| POST | /push/output | 推送生成结果（file 或 base64） |
| GET | /get/output | 获取最新输出图像 |
| POST | /store/trigger | 存储当前工作流用于自动运行 |
| POST | /trigger | 触发 ComfyUI 生成任务 |
| POST | /shutdown | 关闭桥接器（仅本地可用） |
🔧 快速测试连通性：
curl http://127.0.0.1:8765/status
故障排查常见问题
❌ 节点显示“桥接器离线”？
→ 检查服务是否运行，/status 是否可访问。
❌ 前端打不开 / 图标缺失？
→ 确认 CC_FRONTEND_DIR 指向正确静态资源目录。
❌ 点击“生成”无反应？
→ 确保 Edit 节点已至少加载一次（用于存储 graph 数据）；
→ 若更改了地址，在浏览器控制台执行：
localStorage.setItem('cc_bridge_origin', 'http://127.0.0.1:8765')
location.reload()
❌ 输出图像未显示？
→ 检查是否已将最终 IMAGE 连接到 Comfy Canvas - Output 节点；
→ 访问 /get/output 应返回 200 和有效 PNG。
❌ 桥接器无法启动？
→ 检查 8765 端口占用情况，或更换端口；
→ 安装依赖：pip install -r requirements.txt；
→ 查看终端报错信息。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
