diff --git a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItems.tsx b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItems.tsx index 0d0289adf87..ea1c2bdbf67 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItems.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItems.tsx @@ -10,6 +10,7 @@ import { CanvasEntityMenuItemsTransform } from 'features/controlLayers/component import { InpaintMaskMenuItemsAddModifiers } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsAddModifiers'; import { InpaintMaskMenuItemsConvertToSubMenu } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsConvertToSubMenu'; import { InpaintMaskMenuItemsCopyToSubMenu } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsCopyToSubMenu'; +import { InpaintMaskMenuItemsExtractMaskedArea } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsExtractMaskedArea'; import { memo } from 'react'; export const InpaintMaskMenuItems = memo(() => { @@ -24,6 +25,7 @@ export const InpaintMaskMenuItems = memo(() => { + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsExtractMaskedArea.tsx b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsExtractMaskedArea.tsx new file mode 100644 index 00000000000..562fd4366ad --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsExtractMaskedArea.tsx @@ -0,0 +1,160 @@ +import { MenuItem } from '@invoke-ai/ui-library'; +import { logger } from 'app/logging/logger'; +import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; +import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; +import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; +import { canvasToImageData, getPrefixedId } from 'features/controlLayers/konva/util'; +import type { CanvasImageState, Rect } from 'features/controlLayers/store/types'; +import { toast } from 'features/toast/toast'; +import { memo, useCallback } from 'react'; +import { PiSelectionBackgroundBold } from 'react-icons/pi'; +import { serializeError } from 'serialize-error'; + +const log = logger('canvas'); + +export const InpaintMaskMenuItemsExtractMaskedArea = memo(() => { + const canvasManager = useCanvasManager(); + const entityIdentifier = useEntityIdentifierContext('inpaint_mask'); + const isBusy = useCanvasIsBusy(); + + const onExtract = useCallback(() => { + // The active inpaint mask layer is required to build the mask used for extraction. + const maskAdapter = canvasManager.getAdapter(entityIdentifier); + if (!maskAdapter) { + log.error({ entityIdentifier }, 'Inpaint mask adapter not found when extracting masked area'); + toast({ status: 'error', title: 'Unable to extract masked area' }); + return; + } + + try { + // Get the canvas bounding box so the raster extraction respects the visible canvas bounds. + const bbox = canvasManager.stateApi.getBbox(); + const rect: Rect = { + x: Math.floor(bbox.rect.x), + y: Math.floor(bbox.rect.y), + width: Math.floor(bbox.rect.width), + height: Math.floor(bbox.rect.height), + }; + + // Abort when the canvas is effectively empty—no pixels to extract. + if (rect.width <= 0 || rect.height <= 0) { + toast({ status: 'warning', title: 'Canvas is empty' }); + return; + } + + // Gather the visible raster layer adapters so we can composite them into a single bitmap. + const rasterAdapters = canvasManager.compositor.getVisibleAdaptersOfType('raster_layer'); + + let compositeImageData: ImageData; + if (rasterAdapters.length === 0) { + // No visible raster layers—create a transparent buffer that matches the canvas bounds. + compositeImageData = new ImageData(rect.width, rect.height); + } else { + // Render the visible raster layers into an offscreen canvas restricted to the canvas bounds. + const compositeCanvas = canvasManager.compositor.getCompositeCanvas(rasterAdapters, rect); + compositeImageData = canvasToImageData(compositeCanvas); + } + + // Render the inpaint mask layer into a canvas so we have the alpha data that defines the mask. + const maskCanvas = maskAdapter.getCanvas(rect); + const maskImageData = canvasToImageData(maskCanvas); + + // Ensure both composite and mask image data exist and agree on dimensions. + if ( + !compositeImageData || + !maskImageData || + maskImageData.width !== compositeImageData.width || + maskImageData.height !== compositeImageData.height + ) { + log.error( + { + hasComposite: !!compositeImageData, + hasMask: !!maskImageData, + maskDimensions: maskImageData ? { width: maskImageData.width, height: maskImageData.height } : null, + compositeDimensions: compositeImageData + ? { width: compositeImageData.width, height: compositeImageData.height } + : null, + }, + 'Mask and composite dimensions did not match or image data missing when extracting masked area' + ); + toast({ status: 'error', title: 'Unable to extract masked area' }); + return; + } + + // At this point both image buffers are guaranteed to be valid and dimensionally aligned. + const compositeArray = compositeImageData.data; + const maskArray = maskImageData.data; + + // Prepare output pixel buffer. + const outputArray = new Uint8ClampedArray(compositeArray.length); + + // Apply the mask alpha only to the alpha channel. + // Do NOT multiply RGB by maskAlpha to avoid dark fringe artifacts around mask edges. + for (let i = 0; i < compositeArray.length; i += 4) { + // Read original composite pixel, defaulting to 0 to satisfy strict indexed access rules. + const r = compositeArray[i] ?? 0; + const g = compositeArray[i + 1] ?? 0; + const b = compositeArray[i + 2] ?? 0; + const a = compositeArray[i + 3] ?? 0; + + // Extract mask alpha (0..255 → 0..1). + const maskAlpha = (maskArray[i + 3] ?? 0) / 255; + + // Preserve original RGB values. + outputArray[i] = r; + outputArray[i + 1] = g; + outputArray[i + 2] = b; + + // Mask only the alpha channel to avoid halo artifacts. + outputArray[i + 3] = Math.round(a * maskAlpha); + } + + // Package the masked pixels into an ImageData and draw them to an offscreen canvas. + const outputImageData = new ImageData(outputArray, rect.width, rect.height); + const outputCanvas = document.createElement('canvas'); + outputCanvas.width = rect.width; + outputCanvas.height = rect.height; + const outputContext = outputCanvas.getContext('2d'); + + if (!outputContext) { + throw new Error('Failed to create canvas context for masked extraction'); + } + + outputContext.putImageData(outputImageData, 0, 0); + + // Convert the offscreen canvas into an Invoke canvas image state for insertion into the layer stack. + const imageState: CanvasImageState = { + id: getPrefixedId('image'), + type: 'image', + image: { + dataURL: outputCanvas.toDataURL('image/png'), + width: rect.width, + height: rect.height, + }, + }; + + // Insert the new raster layer at the top of the raster layer stack. + const addAfter = canvasManager.stateApi.getRasterLayersState().entities.at(-1)?.id; + + canvasManager.stateApi.addRasterLayer({ + overrides: { + objects: [imageState], + position: { x: rect.x, y: rect.y }, + }, + isSelected: true, + addAfter, + }); + } catch (error) { + log.error({ error: serializeError(error as Error) }, 'Failed to extract masked area to raster layer'); + toast({ status: 'error', title: 'Unable to extract masked area' }); + } + }, [canvasManager, entityIdentifier]); + + return ( + } isDisabled={isBusy}> + Extract masked area to new layer + + ); +}); + +InpaintMaskMenuItemsExtractMaskedArea.displayName = 'InpaintMaskMenuItemsExtractMaskedArea';