From 442fc02429a9d75d91d95b5532491623bfed975e Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Thu, 8 Aug 2024 12:56:55 -0400
Subject: [PATCH] resize images to 100x100 for style preset images

---
 .../web/src/common/hooks/useImageUrlToBlob.ts | 24 ++++++++++++++-----
 .../features/gallery/hooks/useImageActions.ts |  2 +-
 .../components/StylePresetListItem.tsx        |  2 +-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/common/hooks/useImageUrlToBlob.ts b/invokeai/frontend/web/src/common/hooks/useImageUrlToBlob.ts
index 197782de21..4916dc974e 100644
--- a/invokeai/frontend/web/src/common/hooks/useImageUrlToBlob.ts
+++ b/invokeai/frontend/web/src/common/hooks/useImageUrlToBlob.ts
@@ -9,21 +9,33 @@ import { useCallback } from 'react';
  */
 export const useImageUrlToBlob = () => {
   const imageUrlToBlob = useCallback(
-    async (url: string) =>
+    async (url: string, dimension?: number) =>
       new Promise<Blob | null>((resolve) => {
         const img = new Image();
         img.onload = () => {
-          console.log("on load")
           const canvas = document.createElement('canvas');
-          canvas.width = img.width;
-          canvas.height = img.height;
+          let width = img.width;
+          let height = img.height;
+
+          if (dimension) {
+            const aspectRatio = img.width / img.height;
+            if (img.width > img.height) {
+              width = dimension;
+              height = dimension / aspectRatio;
+            } else {
+              height = dimension;
+              width = dimension * aspectRatio;
+            }
+          }
+
+          canvas.width = width;
+          canvas.height = height;
 
           const context = canvas.getContext('2d');
           if (!context) {
-            console.log("no context")
             return;
           }
-          context.drawImage(img, 0, 0);
+          context.drawImage(img, 0, 0, width, height);
           resolve(
             new Promise<Blob | null>((resolve) => {
               canvas.toBlob(function (blob) {
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts b/invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts
index eeedcc454f..c661f8b217 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts
@@ -72,7 +72,7 @@ export const useImageActions = (image_name?: string) => {
     if (image_name && metadata && imageDTO) {
       const positivePrompt = await handlers.positivePrompt.parse(metadata)
       const negativePrompt = await handlers.negativePrompt.parse(metadata)
-      const imageBlob = await imageUrlToBlob(imageDTO.image_url)
+      const imageBlob = await imageUrlToBlob(imageDTO.image_url, 100)
 
       dispatch(prefilledFormDataChanged({ name: "", positivePrompt, negativePrompt, image: imageBlob ? new File([imageBlob], "stylePreset.png", { type: 'image/png', }) : null }))
       dispatch(isModalOpenChanged(true))
diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx
index 5b6c2f87d8..81a1fe0a2c 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx
@@ -28,7 +28,7 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
       const { positive_prompt, negative_prompt } = preset_data;
       let imageBlob = null;
       if (preset.image) {
-        imageBlob = await imageUrlToBlob(preset.image);
+        imageBlob = await imageUrlToBlob(preset.image, 100);
       }
 
       dispatch(