fix(api,ui): fix canvas saved images have extra transparent regions

- add `crop_visible` param to upload image & set to true only for canvas saves

Author: psychedelicious

invokeai/app/api/routers/images.py

@@ -46,6 +46,9 @@ async def upload_image(
     session_id: Optional[str] = Query(
         default=None, description="The session ID associated with this upload, if any"
     ),
+    crop_visible: Optional[bool] = Query(
+        default=False, description="Whether to crop the image"
+    ),
 ) -> ImageDTO:
     """Uploads an image"""
     if not file.content_type.startswith("image"):
@@ -55,6 +58,9 @@ async def upload_image(
 
     try:
         pil_image = Image.open(io.BytesIO(contents))
+        if crop_visible:
+            bbox = pil_image.getbbox()
+            pil_image = pil_image.crop(bbox)
     except:
         # Error opening the image
         raise HTTPException(status_code=415, detail="Failed to read image")

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts

@@ -35,6 +35,7 @@ export const addCanvasSavedToGalleryListener = () => {
           image_category: 'general',
           is_intermediate: false,
           board_id: state.gallery.autoAddBoardId,
+          crop_visible: true,
           postUploadAction: {
             type: 'TOAST',
             toastOptions: { title: 'Canvas Saved to Gallery' },

invokeai/frontend/web/src/services/api/endpoints/images.ts

@@ -421,6 +421,7 @@ export const imagesApi = api.injectEndpoints({
         postUploadAction?: PostUploadAction;
         session_id?: string;
         board_id?: string;
+        crop_visible?: boolean;
       }
     >({
       query: ({
@@ -429,6 +430,7 @@ export const imagesApi = api.injectEndpoints({
         is_intermediate,
         session_id,
         board_id,
+        crop_visible,
       }) => {
         const formData = new FormData();
         formData.append('file', file);
@@ -441,6 +443,7 @@ export const imagesApi = api.injectEndpoints({
             is_intermediate,
             session_id,
             board_id,
+            crop_visible,
           },
         };
       },

invokeai/frontend/web/src/services/api/schema.d.ts

@@ -5356,17 +5356,17 @@ export type components = {
       image?: components["schemas"]["ImageField"];
     };
     /**
-     * StableDiffusionXLModelFormat 
+     * StableDiffusion2ModelFormat 
      * @description An enumeration. 
      * @enum {string}
      */
-    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
+    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
     /**
-     * StableDiffusion2ModelFormat 
+     * StableDiffusionXLModelFormat 
      * @description An enumeration. 
      * @enum {string}
      */
-    StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
+    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusion1ModelFormat 
      * @description An enumeration. 
@@ -6050,6 +6050,8 @@ export type operations = {
         board_id?: string;
         /** @description The session ID associated with this upload, if any */
         session_id?: string;
+        /** @description Whether to crop the image */
+        crop_visible?: boolean;
       };
     };
     requestBody: {