%20(1).png)
ComfyUI-enricos-nodes 插件完整教程
1. 插件简介
插件地址： https://github.com/erosDiffusion/ComfyUI-enricos-nodes
这个插件就像是给 ComfyUI 装了一个超级强大的"图片合成工作台"！它能让你像在Photoshop里一样，把多张图片拖拽、旋转、缩放，然后组合成一张完美的合成图片。最神奇的是，你可以直接在ComfyUI里用鼠标操作，就像玩拼图游戏一样简单！
想象一下，你有8张不同的图片（比如一个人物、一只动物、一些背景元素），这个插件就能让你像导演一样，把它们摆放在一个画布上，调整大小、角度、位置，最后合成一张完美的作品。而且所有的操作都是可视化的，不需要你去猜坐标数字！
主要功能：
- 可视化图片合成：像拼图一样拖拽摆放图片
- 支持8张图片同时合成：可以创建复杂的场景
- 实时预览：所见即所得的编辑体验
- 智能变换：支持旋转、缩放、移动等操作
- 遮罩支持：可以给每张图片添加遮罩效果
- 精确控制：可以输出每张图片的精确位置信息
- 颜色采样：可以从图片中提取颜色
能给我们带来什么效果：
- 快速创建复杂的图片合成
- 为ControlNet提供精确的构图控制
- 制作多层次的艺术作品
- 快速原型设计和布局测试
- 精确的区域提示词控制
2. 如何安装
2.1 方法一：使用ComfyUI Manager（推荐）
- 打开ComfyUI Manager
- 搜索"Compositor"
- 选择来自erosDiffusion的节点
- 点击安装
2.2 方法二：Git克隆安装
-
进入ComfyUI插件目录
cd ComfyUI/custom_nodes -
克隆插件
git clone https://github.com/erosDiffusion/ComfyUI-enricos-nodes.git -
重启ComfyUI
2.3 方法三：通过Manager的Git URL安装
- 打开ComfyUI Manager
- 点击"Install via Git URL"
- 粘贴URL：
https://github.com/erosDiffusion/ComfyUI-enricos-nodes.git - 点击安装
2.4 注意事项
- 如果遇到安全级别限制，需要在Manager配置中设置安全级别为"weak"
- 插件包含前端JavaScript代码，需要刷新浏览器页面
3. 节点详细解析
3.1 Compositor3 节点 - 核心合成器
这个节点就像一个"魔法画布"，是整个插件的核心。它能接收多张图片，然后让你在一个可视化的界面里像玩拼图一样摆放它们。
3.1.1 节点功能说明
这个合成器就像一个智能的拼图桌，你可以把最多8张图片放在上面，然后用鼠标拖拽、旋转、缩放，直到满意为止。它会记住你的每一个操作，并且能输出最终的合成图片。
3.1.2 参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 配置 | config | COMPOSITOR_CONFIG类型 | 连接输入 | 从配置节点接收设置信息，就像接收工作台的规格说明 | 合成器配置数据 | 连接CompositorConfig3节点 |
| 画布数据 | fabricData | 文本 | {} | 记录你在画布上的所有操作，就像保存拼图的摆放记录 | Fabric.js画布状态数据 | 系统自动生成，不需要手动输入 |
| 图片名称 | imageName | 文本 | new.png | 输出图片的文件名，就像给作品起名字 | 输出文件名 | "my_composition.png" |
| 工具开关 | tools | 布尔值 | True | 是否启用额外的编辑工具 | 工具面板开关 | True启用更多功能 |
| 扩展配置 | extendedConfig | COMPOSITOR_CONFIG类型 | 可选 | 额外的配置信息，包含图片数据 | 扩展配置数据 | 通常自动连接 |
3.2 CompositorConfig3 节点 - 配置管理器
这个节点就像一个"工作台设置面板"，负责设置画布大小、处理输入的图片，并且把所有设置传递给合成器。
3.2.1 节点功能说明
这个配置器就像装修时的设计图纸，它决定了你的工作台有多大、能放多少东西、怎么处理材料等等。它还负责把你输入的图片转换成合成器能理解的格式。
3.2.2 参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 宽度 | width | 0-最大分辨率 | 512 | 画布的宽度，就像选择画纸的宽度 | 输出图像宽度像素 | 512适合方形，1024适合高清 |
| 高度 | height | 0-最大分辨率 | 512 | 画布的高度，就像选择画纸的高度 | 输出图像高度像素 | 512适合方形，768适合竖图 |
| 边距 | padding | 0-最大分辨率 | 100 | 画布周围的缓冲区域，就像桌子比画纸大一圈 | 画布周围的缓冲区域 | 100够用，复杂布局用200 |
| 标准化高度 | normalizeHeight | True/False | False | 是否把所有图片调整到相同高度，就像统一尺寸 | 图像高度标准化 | True统一高度，False保持原比例 |
| 配置改变时 | onConfigChanged | True/False | False | 配置改变时的行为：停止还是继续 | 配置变更处理方式 | False停止编辑，True自动继续 |
| 反转遮罩 | invertMask | True/False | False | 是否反转遮罩效果，就像底片效果 | 遮罩反转开关 | False正常，True反转效果 |
| 初始化标记 | initialized | 文本 | 空 | 系统内部使用的初始化标记 | 初始化状态标记 | 系统自动管理 |
| 图片1-8 | image1-image8 | IMAGE类型 | 可选 | 要合成的图片，最多8张，就像准备拼图的素材 | 输入图像数据 | 连接图片加载节点 |
| 遮罩1-8 | mask1-mask8 | MASK类型 | 可选 | 每张图片对应的遮罩，用于控制透明度 | 图像遮罩数据 | 连接遮罩生成节点 |
3.3 CompositorTools3 节点 - 工具面板
这个节点就像一个"工具箱开关"，用来启用合成器的额外工具功能。
3.3.1 节点功能说明
这个工具节点就像给工作台添加更多专业工具，比如对齐工具、精确移动工具等。它目前还在实验阶段，需要刷新页面才能看到新工具。
3.3.2 参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 无输入参数 | - | - | - | 这个节点不需要输入参数，就像一个简单的开关 | 无需输入参数 | 直接添加到工作流即可 |
3.4 CompositorTransformsOutV3 节点 - 变换信息输出器
这个节点就像一个"测量仪"，能告诉你每张图片在画布上的精确位置、大小、角度等信息。
3.4.1 节点功能说明
这个输出器就像一个精密的测量工具，它能读取合成器中某张图片的所有变换信息，包括位置坐标、尺寸大小、旋转角度等，这些信息可以用于其他节点，比如区域提示词控制。
3.4.2 参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 变换数据 | transforms | 文本 | 连接输入 | 从合成器接收的变换信息，就像接收测量数据 | 变换状态JSON数据 | 连接Compositor3的transforms输出 |
| 通道选择 | channel | 1-8 | 1 | 选择要输出哪张图片的信息，就像选择测量对象 | 图层通道选择 | 1表示第一张图片，8表示第八张 |
| 强制整数 | forceInt | True/False | True | 是否把小数转换成整数，有些节点需要整数 | 数值类型转换 | True输出整数，False保持小数 |
3.5 CompositorMasksOutputV3 节点 - 遮罩输出器
这个节点就像一个"分拣机"，能把合成器处理后的每张图片和对应的遮罩分别输出。
3.5.1 节点功能说明
这个输出器就像一个智能分拣系统，它接收合成器的输出，然后把8张图片和8个遮罩分别整理出来，让你可以单独使用每一层的内容。
3.5.2 参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 图层输出 | layer_outputs | COMPOSITOR_OUTPUT_MASKS类型 | 连接输入 | 从合成器接收的图层数据，包含所有图片和遮罩 | 合成器输出数据 | 连接Compositor3的layer_outputs |
| 遮罩相减 | subtract_masks | True/False | False | 是否让上层遮罩从下层遮罩中减去，避免重叠 | 遮罩层级处理 | True避免重叠，False保持原样 |
3.6 CompositorColorPicker 节点 - 颜色选择器
这个节点就像一个"调色盘"，能把RGB颜色值转换成各种不同的颜色格式。
3.6.1 节点功能说明
这个颜色选择器就像一个万能的颜色转换器，你输入红绿蓝三个数值，它就能给你输出十六进制颜色代码、16位颜色值、24位颜色值，还能生成一个颜色预览图。
3.6.2 参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 红色 | red | 0-255 | 0 | 红色的强度，就像调节红色灯泡的亮度 | 红色通道值 | 255是最红，0是没有红色 |
| 绿色 | green | 0-255 | 0 | 绿色的强度，就像调节绿色灯泡的亮度 | 绿色通道值 | 255是最绿，0是没有绿色 |
| 蓝色 | blue | 0-255 | 0 | 蓝色的强度，就像调节蓝色灯泡的亮度 | 蓝色通道值 | 255是最蓝，0是没有蓝色 |
| 格式 | format | RGB565/RGB555 | RGB565 | 16位颜色的编码格式，就像选择颜色的压缩方式 | 16位颜色编码格式 | RGB565更常用 |
3.7 ImageColorSampler 节点 - 图片颜色采样器
这个节点就像一个"吸管工具"，能让你在图片上点击来提取颜色，创建调色板。
3.7.1 节点功能说明
这个采样器就像Photoshop里的吸管工具，你可以在图片上点击多个位置来提取颜色，它会自动创建一个调色板，并且提供各种格式的颜色数据。
3.7.2 参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 图片 | image | IMAGE类型 | 连接输入 | 要采样颜色的图片，就像要用吸管的画布 | 输入图像数据 | 连接图片加载节点 |
| 采样点 | sample_points | 文本 | [] | 记录你点击位置的数据，系统自动生成 | 采样点坐标数据 | 系统自动记录点击位置 |
| 调色板大小 | palette_size | 32-512 | 128 | 生成调色板的尺寸，就像选择调色板的大小 | 调色板图像尺寸 | 128够用，256更清晰 |
| 采样大小 | sample_size | 1-30 | 1 | 每次采样的区域大小，就像吸管的粗细 | 采样区域半径 | 1是精确点，5是小区域平均 |
| 等待输入 | wait_for_input | True/False | True | 是否等待你点击采样，还是直接处理 | 交互模式开关 | True等待点击，False直接处理 |
3.8 前端JavaScript组件
这个插件还包含了丰富的前端JavaScript代码，提供可视化的交互界面。
3.8.1 主要前端文件
| 文件名 | 功能说明 | 通俗解释 |
|---|---|---|
| compositor3.js | 核心合成器界面 | 提供拖拽、旋转、缩放等可视化操作 |
| colorPicker.js | 颜色选择界面 | 提供颜色选择和预览功能 |
| imageSampler.js | 图片采样界面 | 提供点击采样颜色的交互功能 |
| tools.js | 工具面板界面 | 提供额外的编辑工具 |
| fabric.js | 画布引擎 | 底层的图形处理引擎 |
4. 使用技巧和建议
4.1 基础使用流程
- 添加配置节点：先添加CompositorConfig3节点
- 连接图片：把要合成的图片连接到配置节点
- 添加合成器：添加Compositor3节点并连接配置
- 设置输出：连接图片输出节点
- 运行一次：让合成器显示图片
- 可视化编辑：在界面中拖拽调整图片
- 鼠标移出：移出画布区域自动保存
- 继续运行：点击继续完成合成
4.2 操作技巧
- 选择图片：单击选择，拖拽选择多个
- 移动图片：拖拽已选择的图片
- 旋转缩放：按住Alt拖拽进行中心旋转缩放
- 精确移动：用键盘方向键微调位置
- 滚轮缩放：鼠标滚轮可以缩放单个图片
- Shift操作：Shift+点击可以多选或取消选择
4.3 高级技巧
- 负数缩放：拖拽角点到图片内部可以翻转图片
- 分组操作：选择多个图片可以一起移动和缩放
- 缓冲区域：利用padding区域临时存放不用的图片
- 遮罩应用：配合遮罩节点实现复杂的透明效果
4.4 工作流建议
- 固定尺寸：建议先用resize节点统一图片尺寸
- 背景移除：配合rembg节点移除背景
- 深度控制：输出结果可以用于depth ControlNet
- 区域提示：配合transforms输出做区域提示词
5. 常见问题解答
Q1: 为什么合成器界面不显示图片？
A: 需要先运行一次工作流，让合成器加载图片。确保连接了输出节点，否则会被阻塞。
Q2: 如何保存合成结果？
A: 鼠标移出绿色边框区域会自动保存，绿色边框会短暂变成橙色表示保存成功。
Q3: 为什么图片位置不准确？
A: 注意padding设置，输出的坐标会减去padding值。检查transforms输出节点的设置。
Q4: 如何避免随机种子循环？
A: 如果启用了"Grab and Continue"模式，注意合成器左侧不要有随机种子节点。
Q5: 工具面板不显示怎么办？
A: 工具功能需要刷新浏览器页面才能显示，这是实验性功能。
Q6: 如何处理大尺寸图片？
A: 合成器界面不会缩放，建议使用适中的尺寸。如果需要高分辨率，可以在后续节点中放大。
Q7: 遮罩效果不对怎么办？
A: 检查invertMask设置，可能需要反转遮罩。确保遮罩尺寸与图片匹配。
6. 高级应用场景
6.1 复杂场景合成
- 把人物、动物、背景等元素组合成完整场景
- 快速调整构图和布局
- 为AI绘画提供精确的结构控制
6.2 产品展示设计
- 组合产品图片和背景
- 调整产品的展示角度和位置
- 创建专业的产品展示图
6.3 艺术创作
- 拼贴艺术创作
- 超现实主义风格合成
- 概念艺术的快速原型
6.4 ControlNet应用
- 为depth ControlNet提供深度结构
- 为lineart ControlNet提供线稿控制
- 结合各种ControlNet实现精确控制
6.5 区域提示词控制
- 使用transforms输出获得精确坐标
- 配合区域提示词实现分区域描述
- 实现复杂场景的精确控制
7. 技术原理简介（用大白话解释）
7.1 Fabric.js引擎
插件使用了Fabric.js这个强大的画布引擎，就像给浏览器装了一个迷你版的Photoshop，能够处理图片的拖拽、旋转、缩放等操作。
7.2 实时同步机制
当你在界面中操作图片时，所有的变换信息都会实时记录在fabricData中，就像有一个秘书在旁边记录你的每一个动作。
7.3 遮罩处理系统
插件能够智能处理图片的透明度和遮罩，就像给每张图片都配了一个透明度控制器，让合成效果更自然。
7.4 坐标系统
插件使用了padding机制来提供额外的工作空间，就像给画布周围留了一圈空白，让你可以在画布外临时放置图片。
这个插件为ComfyUI带来了专业级的图片合成功能，让复杂的多图合成变得像玩拼图一样简单。它特别适合需要精确控制图片布局的用户，是创作复杂场景和艺术作品的得力助手。