From acee4bd2828e0c5248541cca28bd5d9b02bf008a Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 27 Sep 2023 04:03:14 +0530 Subject: [PATCH 1/2] fix: Always use bbox bounds for Controlnet Image (canvas) --- .../listeners/canvasImageToControlNet.ts | 4 ++-- .../features/canvas/util/getBaseLayerBlob.ts | 24 +++++++++++-------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts index 835b8246f1..7c312b78a4 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts @@ -3,9 +3,9 @@ import { canvasImageToControlNet } from 'features/canvas/store/actions'; import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob'; import { controlNetImageChanged } from 'features/controlNet/store/controlNetSlice'; import { addToast } from 'features/system/store/systemSlice'; +import { t } from 'i18next'; import { imagesApi } from 'services/api/endpoints/images'; import { startAppListening } from '..'; -import { t } from 'i18next'; export const addCanvasImageToControlNetListener = () => { startAppListening({ @@ -16,7 +16,7 @@ export const addCanvasImageToControlNetListener = () => { let blob; try { - blob = await getBaseLayerBlob(state); + blob = await getBaseLayerBlob(state, true); } catch (err) { log.error(String(err)); dispatch( diff --git a/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts b/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts index 3667acc79b..b67789e07e 100644 --- a/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts +++ b/invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts @@ -1,11 +1,14 @@ -import { getCanvasBaseLayer } from './konvaInstanceProvider'; import { RootState } from 'app/store/store'; +import { getCanvasBaseLayer } from './konvaInstanceProvider'; import { konvaNodeToBlob } from './konvaNodeToBlob'; /** * Get the canvas base layer blob, with or without bounding box according to `shouldCropToBoundingBoxOnSave` */ -export const getBaseLayerBlob = async (state: RootState) => { +export const getBaseLayerBlob = async ( + state: RootState, + alwaysUseBoundingBox: boolean = false +) => { const canvasBaseLayer = getCanvasBaseLayer(); if (!canvasBaseLayer) { @@ -24,14 +27,15 @@ export const getBaseLayerBlob = async (state: RootState) => { const absPos = clonedBaseLayer.getAbsolutePosition(); - const boundingBox = shouldCropToBoundingBoxOnSave - ? { - x: boundingBoxCoordinates.x + absPos.x, - y: boundingBoxCoordinates.y + absPos.y, - width: boundingBoxDimensions.width, - height: boundingBoxDimensions.height, - } - : clonedBaseLayer.getClientRect(); + const boundingBox = + shouldCropToBoundingBoxOnSave || alwaysUseBoundingBox + ? { + x: boundingBoxCoordinates.x + absPos.x, + y: boundingBoxCoordinates.y + absPos.y, + width: boundingBoxDimensions.width, + height: boundingBoxDimensions.height, + } + : clonedBaseLayer.getClientRect(); return konvaNodeToBlob(clonedBaseLayer, boundingBox); }; From b3f4f28d763c16186d90d8a2d655e989f0652459 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 27 Sep 2023 05:50:43 +0530 Subject: [PATCH 2/2] fix: Canvas pull getting cropped for Control Images --- .../listenerMiddleware/listeners/canvasImageToControlNet.ts | 4 ++-- .../listenerMiddleware/listeners/canvasMaskToControlNet.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts index 7c312b78a4..9389b0f373 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts @@ -36,10 +36,10 @@ export const addCanvasImageToControlNetListener = () => { file: new File([blob], 'savedCanvas.png', { type: 'image/png', }), - image_category: 'mask', + image_category: 'control', is_intermediate: false, board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId, - crop_visible: true, + crop_visible: false, postUploadAction: { type: 'TOAST', toastOptions: { title: t('toast.canvasSentControlnetAssets') }, diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMaskToControlNet.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMaskToControlNet.ts index 671c7f63e4..2c5c26e830 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMaskToControlNet.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMaskToControlNet.ts @@ -3,9 +3,9 @@ import { canvasMaskToControlNet } from 'features/canvas/store/actions'; import { getCanvasData } from 'features/canvas/util/getCanvasData'; import { controlNetImageChanged } from 'features/controlNet/store/controlNetSlice'; import { addToast } from 'features/system/store/systemSlice'; +import { t } from 'i18next'; import { imagesApi } from 'services/api/endpoints/images'; import { startAppListening } from '..'; -import { t } from 'i18next'; export const addCanvasMaskToControlNetListener = () => { startAppListening({ @@ -50,7 +50,7 @@ export const addCanvasMaskToControlNetListener = () => { image_category: 'mask', is_intermediate: false, board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId, - crop_visible: true, + crop_visible: false, postUploadAction: { type: 'TOAST', toastOptions: { title: t('toast.maskSentControlnetAssets') },