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 },
boundingBoxCoordinates,
boundingBoxDimensions,
stageScale,
isMaskEnabled,
shouldPreserveMaskedArea,
boundingBoxScaleMethod: boundingBoxScale,
scaledBoundingBoxDimensions,
stageCoordinates,
} = state.canvas;
const boundingBox = {
@ -46,14 +46,14 @@ export const getCanvasData = async (state: RootState) => {
// 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({
x: 1 / stageScale,
y: 1 / stageScale,
});
// scale to 1 so we get an uninterpolated image
clonedBaseLayer.scale({ x: 1, y: 1 });
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 = {
x: boundingBox.x + absPos.x,
@ -62,35 +62,41 @@ export const getCanvasData = async (state: RootState) => {
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(
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(
isMaskEnabled ? objects.filter(isCanvasMaskLine) : [],
boundingBox
);
// convert to ImageData (via pure jank)
const baseImageData = await dataURLToImageData(
baseDataURL,
boundingBox.width,
boundingBox.height
);
// convert to ImageData (via pure jank)
const maskImageData = await dataURLToImageData(
maskDataURL,
boundingBox.width,
boundingBox.height
);
// check transparency
const {
isPartiallyTransparent: baseIsPartiallyTransparent,
isFullyTransparent: baseIsFullyTransparent,
} = getImageDataTransparency(baseImageData.data);
// check mask for black
const doesMaskHaveBlackPixels = areAnyPixelsBlack(maskImageData.data);
if (state.system.enableImageDebugging) {