From 107e992cfe9a543ed2643ff15be29ca3df37c450 Mon Sep 17 00:00:00 2001 From: InpaintRegionEditor Dev Date: Tue, 3 Mar 2026 21:56:48 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= =?UTF-8?q?=EF=BC=8C=E5=87=86=E5=A4=87=E5=8F=91=E5=B8=83=20v1.4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - README: 移除开发中标记，更新功能列表 - CHANGELOG: 添加 v1.4.0 版本记录 - HANDOFF: 更新版本历史 - gitignore: 添加 *.bak 排除临时备份 - 代码注释: 掏窟窿 -> 透明区域 RGB 数据丢失 --- .gitignore | 1 + CHANGELOG.md | 11 ++++++++++- README.md | 44 ++++++++++++++++++++------------------------ docs/HANDOFF.md | 7 ++++--- web/extension.js | 6 +++--- 5 files changed, 38 insertions(+), 31 deletions(-) diff --git a/.gitignore b/.gitignore index c3b31bf..9f808de 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ __pycache__/ *.pyc *.pyo .DS_Store +*.bak diff --git a/CHANGELOG.md b/CHANGELOG.md index 880607b..52da6c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.4.0] - 2026-03-03 + +### Added +- **多语言支持**：中英文界面，自动跟随 ComfyUI 语言设置 + +### Fixed +- **编辑图像模式**：使用 `channel=rgb` 参数获取完整 RGB 数据，避免透明区域 RGB 数据丢失 +- **选区坐标自动更新**：加载新图像时自动计算并更新 `region_coords` widget + ## [1.3.0] - 2026-03-03 ### Added @@ -18,7 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - 图像加载：编辑蒙版时使用 `channel=rgb` 和 `channel=a` 分离加载 ### Fixed -- Photopea 编辑蒙版后原图被"掏窟窿"的问题 +- Photopea 编辑蒙版后原图透明区域 RGB 数据丢失的问题 - MaskEditor 保存后文件路径验证失败的问题 - 节点显示蒙版效果 diff --git a/README.md b/README.md index c9a475b..b00d722 100644 --- a/README.md +++ b/README.md @@ -3,11 +3,7 @@ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![ComfyUI](https://img.shields.io/badge/ComfyUI-Custom%20Node-blue.svg)](https://github.com/comfyanonymous/ComfyUI) -**增强版遮罩编辑器**：集成 Photopea 图像编辑 + 可拖动选区调整 - -> ⚠️ **开发中** | 本文档描述的是目标功能，当前版本功能有限 -> -> 📋 **完整技术文档**：见 [`docs/HANDOFF.md`](docs/HANDOFF.md) +**增强版遮罩编辑器**：集成 Photopea 图像编辑 + 可拖动选区调整 + 多语言支持 --- @@ -26,9 +22,10 @@ ## 🎯 功能特性 - 🎨 **Photopea 集成** - 完整的 Photoshop 级编辑功能（液化、仿制图章等） -- 📐 **可拖动选区** - 手动调整参考区域位置（不再只是中心扩散） +- 🎭 **蒙版编辑** - 双图层模式编辑蒙版，支持羽化效果 +- 📐 **可拖动选区** - 手动调整参考区域位置和大小 - 🔄 **自动蒙版检测** - 从 Alpha 通道提取，无蒙版时友好报错 -- 🎭 **选区自动计算** - 选区 = 遮罩边界 + 扩散像素数 +- 🌐 **多语言支持** - 中英文界面，自动跟随 ComfyUI 设置 --- @@ -53,11 +50,12 @@ git clone https://github.com/YOUR_USERNAME/ComfyUI-InpaintRegionEditor.git 1. 添加 **Inpaint Region Editor** 节点 2. 上传图像（需要带 Alpha 通道的 PNG） -3. 右键点击节点 → **"打开 Photopea 编辑"** -4. 在 Photopea 中编辑图像和蒙版 -5. 保存返回节点 -6. 调整扩散像素数或拖动选区框 -7. 执行工作流 +3. 右键点击节点选择操作： + - **编辑图像（Photopea）** - 编辑图像本身 + - **编辑蒙版（Photopea）** - 双图层蒙版编辑，支持羽化 + - **Open in MaskEditor** - 使用 ComfyUI 自带蒙版编辑器 +4. 调整扩散像素数或拖动选区框 +5. 执行工作流 --- @@ -85,22 +83,20 @@ git clone https://github.com/YOUR_USERNAME/ComfyUI-InpaintRegionEditor.git --- -## ⚠️ 当前状态 +## ✅ 已完成功能 -### 已完成 - [x] 基础节点逻辑（`nodes.py`） - [x] Photopea iframe 集成 -- [x] 右键菜单打开 Photopea +- [x] 右键菜单打开 Photopea（编辑图像/编辑蒙版） - [x] 图像预览（自己渲染，不依赖 ComfyUI） -- [x] 选区框绘制（橙色）+ 遮罩区域显示（红色） +- [x] 选区框绘制（橙色）+ 遮罩区域显示 - [x] Alpha 通道自动检测蒙版 -- [x] 选区框拖动功能 - -### 待完善 -- [ ] 拖动体验优化（边界检测、视觉反馈） -- [ ] 图像缩放/放大查看 -- [ ] Photopea 编辑后的图像刷新 -- [ ] 完整工作流测试 +- [x] 选区框拖动和调整大小 +- [x] 选区约束（必须框住蒙版） +- [x] Ctrl+V 粘贴图片 +- [x] MaskEditor 集成 +- [x] 多语言支持（中英文） +- [x] 羽化效果支持 --- @@ -145,4 +141,4 @@ MIT License - 详见 [LICENSE](LICENSE) 文件。 --- -*最后更新：2026-03-02* +*最后更新：2026-03-03* diff --git a/docs/HANDOFF.md b/docs/HANDOFF.md index 34d8d08..4334c99 100644 --- a/docs/HANDOFF.md +++ b/docs/HANDOFF.md @@ -1,6 +1,6 @@ # InpaintRegionEditor 项目交接文档 -> 版本：1.3 | 日期：2026-03-03 +> 版本：1.4 | 日期：2026-03-03 > 交接对象：开发团队 > 交接人：项目经理 Agent @@ -525,9 +525,10 @@ doc.selection.copy(); |------|------|------| | 0.1 | 2026-02-27 | 初始版本（简化版，仅 Photopea 集成） | | 1.0 | 2026-03-02 | 需求最终确认，编写 handoff 文档 | -| 1.1 | 2026-03-03 | Photopea 蒙版编辑功能，修复 RGB 被掏窟窿问题 | +| 1.1 | 2026-03-03 | Photopea 蒙版编辑功能，修复透明区域 RGB 数据丢失问题 | | 1.2 | 2026-03-03 | 选区调整大小、光标变化、Ctrl+V 粘贴、MaskEditor 集成 | | 1.3 | 2026-03-03 | MaskEditor clipspace 支持、选区坐标同步、羽化效果 | +| 1.4 | 2026-03-03 | 多语言支持（中英文）、修复编辑图像透明区域 RGB 数据丢失、修复选区坐标自动更新 | --- @@ -536,7 +537,7 @@ doc.selection.copy(); ### 13.1 Canvas Premultiplied Alpha 问题 **问题描述**： -当 Canvas 通过 `drawImage()` 绘制带有 Alpha < 255 的 PNG 图像时，浏览器会应用 **premultiplied alpha**，导致 Alpha = 0 的像素 RGB 数据丢失（被"掏窟窿"）。 +当 Canvas 通过 `drawImage()` 绘制带有 Alpha < 255 的 PNG 图像时，浏览器会应用 **premultiplied alpha**，导致 Alpha = 0 的像素 RGB 数据丢失。 **解决方案**： 1. **加载时**：使用 ComfyUI `/view` API 的 `channel=rgb` 和 `channel=a` 参数分别获取 RGB 和 Alpha 数据 diff --git a/web/extension.js b/web/extension.js index 6d5972f..2d9f33e 100644 --- a/web/extension.js +++ b/web/extension.js @@ -174,7 +174,7 @@ async function loadImg() { const idx = filename.lastIndexOf("/"); if (idx !== -1) { subfolder = filename.substring(0, idx); filename = filename.substring(idx + 1); } - // 使用 channel=rgb 获取完整 RGB（避免被"掏窟窿"） + // 使用 channel=rgb 获取完整 RGB（避免透明区域 RGB 数据丢失） let url = "/view?filename=" + encodeURIComponent(filename) + "&type=" + encodeURIComponent(type) + "&channel=rgb"; if (subfolder) url += "&subfolder=" + encodeURIComponent(subfolder); @@ -256,7 +256,7 @@ async function loadImgForMask() { if (subfolder) baseUrl += "&subfolder=" + encodeURIComponent(subfolder); // 关键修复：分别获取 RGB 和 Alpha，绑过 Canvas 的 premultiplied alpha 问题 - // 1. 获取完整 RGB（不会被掏窟窿） + // 1. 获取完整 RGB（避免透明区域 RGB 数据丢失） setMaskStatus(t('maskEditor.loadRgb')); let rgbUrl = baseUrl + "&channel=rgb"; const rgbResp = await fetch(rgbUrl); @@ -563,7 +563,7 @@ async function getOriginalImageBlob(imagePath) { const idx = filename.lastIndexOf("/"); if (idx !== -1) { subfolder = filename.substring(0, idx); filename = filename.substring(idx + 1); } - // 关键：添加 channel=rgb 参数，确保获取完整 RGB 数据（不被掏窟窿） + // 关键：添加 channel=rgb 参数，确保获取完整 RGB 数据（避免透明区域 RGB 数据丢失） let url = "/view?filename=" + encodeURIComponent(filename) + "&type=" + encodeURIComponent(type) + "&channel=rgb"; if (subfolder) url += "&subfolder=" + encodeURIComponent(subfolder);