Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): use cloned canvas for retrieving dataURL/Blobs

Browse Source
This commit is contained in:
psychedelicious 2023-05-13 16:24:04 +10:00
parent cf36e4029e
commit 0221ca8f49
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts
View File

@ -26,11 +26,11 @@ export const getCanvasData = async (state: RootState) => {
layerState: { objects }, layerState: { objects },
boundingBoxCoordinates, boundingBoxCoordinates,
boundingBoxDimensions, boundingBoxDimensions,
stageScale,
isMaskEnabled, isMaskEnabled,
shouldPreserveMaskedArea, shouldPreserveMaskedArea,
boundingBoxScaleMethod: boundingBoxScale, boundingBoxScaleMethod: boundingBoxScale,
scaledBoundingBoxDimensions, scaledBoundingBoxDimensions,
stageCoordinates,
} = state.canvas; } = state.canvas;
const boundingBox = { const boundingBox = {
@ -46,14 +46,14 @@ export const getCanvasData = async (state: RootState) => {
// generationParameters.bounding_box = boundingBox; // generationParameters.bounding_box = boundingBox;
const tempScale = canvasBaseLayer.scale(); // clone the base layer so we don't affect the actual canvas during scaling
const clonedBaseLayer = canvasBaseLayer.clone();
canvasBaseLayer.scale({ // scale to 1 so we get an uninterpolated image
x: 1 / stageScale, clonedBaseLayer.scale({ x: 1, y: 1 });
y: 1 / stageScale,
});
const absPos = canvasBaseLayer.getAbsolutePosition(); // absolute position is needed to get the bounding box coords relative to the base layer
const absPos = clonedBaseLayer.getAbsolutePosition();
const offsetBoundingBox = { const offsetBoundingBox = {
x: boundingBox.x + absPos.x, x: boundingBox.x + absPos.x,
@ -62,35 +62,41 @@ export const getCanvasData = async (state: RootState) => {
height: boundingBox.height, height: boundingBox.height,
}; };
const baseDataURL = canvasBaseLayer.toDataURL(offsetBoundingBox); // get a dataURL of the bbox'd region (will convert this to an ImageData to check its transparency)
const baseDataURL = clonedBaseLayer.toDataURL(offsetBoundingBox);
// get a blob (will upload this as the canvas intermediate)
const baseBlob = await canvasToBlob( const baseBlob = await canvasToBlob(
canvasBaseLayer.toCanvas(offsetBoundingBox) clonedBaseLayer.toCanvas(offsetBoundingBox)
); );
canvasBaseLayer.scale(tempScale); // build a new mask layer and get its dataURL and blob
const { maskDataURL, maskBlob } = await generateMask( const { maskDataURL, maskBlob } = await generateMask(
isMaskEnabled ? objects.filter(isCanvasMaskLine) : [], isMaskEnabled ? objects.filter(isCanvasMaskLine) : [],
boundingBox boundingBox
); );
// convert to ImageData (via pure jank)
const baseImageData = await dataURLToImageData( const baseImageData = await dataURLToImageData(
baseDataURL, baseDataURL,
boundingBox.width, boundingBox.width,
boundingBox.height boundingBox.height
); );
// convert to ImageData (via pure jank)
const maskImageData = await dataURLToImageData( const maskImageData = await dataURLToImageData(
maskDataURL, maskDataURL,
boundingBox.width, boundingBox.width,
boundingBox.height boundingBox.height
); );
// check transparency
const { const {
isPartiallyTransparent: baseIsPartiallyTransparent, isPartiallyTransparent: baseIsPartiallyTransparent,
isFullyTransparent: baseIsFullyTransparent, isFullyTransparent: baseIsFullyTransparent,
} = getImageDataTransparency(baseImageData.data); } = getImageDataTransparency(baseImageData.data);
// check mask for black
const doesMaskHaveBlackPixels = areAnyPixelsBlack(maskImageData.data); const doesMaskHaveBlackPixels = areAnyPixelsBlack(maskImageData.data);
if (state.system.enableImageDebugging) { if (state.system.enableImageDebugging) {