mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-22 05:02:11 -03:00
Introduces functionality for automatically applying predefined masks in the ComfyUI mask editor. Adds new API methods and utilities in Canvas.js and mask_utils.js, including support for sending a clean image, handling both new and old mask editors, and flexible mask formats. Includes documentation, usage examples, and helper functions for mask processing and error handling.
187 lines
5.1 KiB
Plaintext
187 lines
5.1 KiB
Plaintext
# Automatyczne Nakładanie Masek w Mask Editorze
|
|
|
|
## Przegląd
|
|
|
|
Ta funkcjonalność pozwala na automatyczne nakładanie predefiniowanych masek po otwarciu mask editora ComfyUI. Główną zaletą jest możliwość wysłania czystego obrazu (bez maski) do editora, a następnie automatyczne nałożenie maski w edytorze, co pozwala na prawidłowe działanie narzędzi takich jak gumka.
|
|
|
|
## Kluczowe Funkcje
|
|
|
|
### 1. Wysyłanie Czystego Obrazu
|
|
- Możliwość wysłania obrazu bez istniejącej maski do mask editora
|
|
- Editor "pamięta" oryginalny obraz pod maską
|
|
- Prawidłowe działanie gumki i innych narzędzi edycji
|
|
|
|
### 2. Automatyczne Nakładanie Maski
|
|
- Maska jest nakładana automatycznie po otwarciu editora
|
|
- Obsługa zarówno nowego jak i starego mask editora ComfyUI
|
|
- Natychmiastowe nakładanie bez opóźnień
|
|
|
|
### 3. Elastyczne Formaty Masek
|
|
- Obsługa obiektów Image
|
|
- Obsługa elementów HTMLCanvasElement
|
|
- Automatyczna konwersja formatów
|
|
|
|
## API
|
|
|
|
### Canvas.startMaskEditor(predefinedMask, sendCleanImage)
|
|
|
|
Główna metoda do uruchamiania mask editora z predefiniowaną maską.
|
|
|
|
**Parametry:**
|
|
- `predefinedMask` (Image|HTMLCanvasElement|null) - Opcjonalna maska do nałożenia
|
|
- `sendCleanImage` (boolean) - Czy wysłać czysty obraz (domyślnie false)
|
|
|
|
**Przykład:**
|
|
```javascript
|
|
// Wyślij czysty obraz i nałóż maskę w edytorze
|
|
await canvas.startMaskEditor(maskImage, true);
|
|
|
|
// Wyślij obraz z istniejącą maską i dodaj nową maskę
|
|
await canvas.startMaskEditor(maskImage, false);
|
|
```
|
|
|
|
### Funkcje Pomocnicze (mask_utils.js)
|
|
|
|
#### start_mask_editor_with_predefined_mask(canvasInstance, maskImage, sendCleanImage)
|
|
|
|
Pomocnicza funkcja dla łatwiejszego użycia.
|
|
|
|
**Parametry:**
|
|
- `canvasInstance` - Instancja Canvas
|
|
- `maskImage` - Obraz maski
|
|
- `sendCleanImage` - Czy wysłać czysty obraz (domyślnie true)
|
|
|
|
#### create_mask_from_image_src(imageSrc)
|
|
|
|
Tworzy obiekt Image z URL lub data URL.
|
|
|
|
**Parametry:**
|
|
- `imageSrc` (string) - URL obrazu
|
|
|
|
**Zwraca:** Promise<Image>
|
|
|
|
#### canvas_to_mask_image(canvas)
|
|
|
|
Konwertuje HTMLCanvasElement do obiektu Image.
|
|
|
|
**Parametry:**
|
|
- `canvas` (HTMLCanvasElement) - Canvas do konwersji
|
|
|
|
**Zwraca:** Promise<Image>
|
|
|
|
## Jak to Działa
|
|
|
|
### 1. Przygotowanie Obrazu
|
|
```javascript
|
|
// Wybór metody w zależności od parametru sendCleanImage
|
|
if (sendCleanImage) {
|
|
blob = await this.canvasLayers.getFlattenedCanvasAsBlob();
|
|
} else {
|
|
blob = await this.canvasLayers.getFlattenedCanvasForMaskEditor();
|
|
}
|
|
```
|
|
|
|
### 2. Otwieranie Editora
|
|
```javascript
|
|
// Standardowy proces otwierania mask editora
|
|
ComfyApp.copyToClipspace(this.node);
|
|
ComfyApp.clipspace_return_node = this.node;
|
|
ComfyApp.open_maskeditor();
|
|
```
|
|
|
|
### 3. Oczekiwanie na Otwarcie
|
|
```javascript
|
|
waitForMaskEditorAndApplyMask() {
|
|
const checkEditor = () => {
|
|
if (mask_editor_showing(app)) {
|
|
// Editor się otworzył - nałóż maskę
|
|
setTimeout(() => {
|
|
this.applyMaskToEditor(this.pendingMask);
|
|
}, 200);
|
|
} else {
|
|
setTimeout(checkEditor, 100);
|
|
}
|
|
};
|
|
checkEditor();
|
|
}
|
|
```
|
|
|
|
### 4. Nakładanie Maski
|
|
```javascript
|
|
// Automatyczne wykrywanie typu editora
|
|
const useNewEditor = app.ui.settings.getSettingValue('Comfy.MaskEditor.UseNewEditor');
|
|
|
|
if (useNewEditor) {
|
|
await this.applyMaskToNewEditor(maskData);
|
|
} else {
|
|
await this.applyMaskToOldEditor(maskData);
|
|
}
|
|
```
|
|
|
|
## Obsługa Różnych Editorów
|
|
|
|
### Nowy Editor (MessageBroker)
|
|
```javascript
|
|
const editor = MaskEditorDialog.instance;
|
|
const messageBroker = editor.getMessageBroker();
|
|
const maskCanvas = await messageBroker.pull('maskCanvas');
|
|
const maskCtx = await messageBroker.pull('maskCtx');
|
|
```
|
|
|
|
### Stary Editor (Bezpośredni Dostęp)
|
|
```javascript
|
|
const maskCanvas = document.getElementById('maskCanvas');
|
|
const maskCtx = maskCanvas.getContext('2d');
|
|
```
|
|
|
|
## Przetwarzanie Masek
|
|
|
|
Maski są automatycznie przetwarzane do odpowiedniego formatu:
|
|
|
|
```javascript
|
|
// Konwersja do formatu editora
|
|
for (let i = 0; i < data.length; i += 4) {
|
|
const alpha = data[i + 3];
|
|
data[i] = maskColor.r; // R
|
|
data[i + 1] = maskColor.g; // G
|
|
data[i + 2] = maskColor.b; // B
|
|
data[i + 3] = alpha; // Zachowaj alpha
|
|
}
|
|
```
|
|
|
|
## Obsługa Błędów
|
|
|
|
System zawiera kompleksową obsługę błędów:
|
|
|
|
```javascript
|
|
try {
|
|
await this.applyMaskToEditor(maskData);
|
|
log.info("Predefined mask applied successfully");
|
|
} catch (error) {
|
|
log.error("Failed to apply predefined mask:", error);
|
|
}
|
|
```
|
|
|
|
## Kompatybilność
|
|
|
|
- ✅ Nowy mask editor ComfyUI (MessageBroker)
|
|
- ✅ Stary mask editor ComfyUI (bezpośredni dostęp)
|
|
- ✅ Wszystkie formaty masek (Image, Canvas)
|
|
- ✅ Automatyczne wykrywanie typu editora
|
|
|
|
## Zalety
|
|
|
|
1. **Zachowanie Oryginalnego Obrazu**: Editor "pamięta" co jest pod maską
|
|
2. **Prawidłowe Działanie Gumki**: Możliwość usuwania części maski
|
|
3. **Elastyczność**: Obsługa różnych formatów i editorów
|
|
4. **Automatyzacja**: Brak potrzeby ręcznego nakładania masek
|
|
5. **Kompatybilność**: Działa z istniejącym kodem
|
|
|
|
## Przypadki Użycia
|
|
|
|
- Automatyczne nakładanie masek z AI/ML modeli
|
|
- Predefiniowane szablony masek
|
|
- Integracja z zewnętrznymi narzędziami
|
|
- Workflow automatyzacja
|
|
- Batch processing masek
|