From f57432fa8253dbe64b0087f07337dba64004dd04 Mon Sep 17 00:00:00 2001
From: Sharlayan <118798881+sharlayan@users.noreply.github.com>
Date: Tue, 28 Jul 2026 22:49:32 +0900
Subject: [PATCH] [Glitch] Fix oversized profile image crop uploads

Port 857db1913e8c5929fd60ad9085eb013dbe0af315 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../features/account_edit/modals/image_upload.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/account_edit/modals/image_upload.tsx b/app/javascript/flavours/glitch/features/account_edit/modals/image_upload.tsx
index 3158ccc22f..546f3efc20 100644
--- a/app/javascript/flavours/glitch/features/account_edit/modals/image_upload.tsx
+++ b/app/javascript/flavours/glitch/features/account_edit/modals/image_upload.tsx
@@ -94,12 +94,12 @@ export const ImageUploadModal: FC<
         setStep('select');
         return;
       }
-      void calculateCroppedImage(imageSrc, crop).then((blob) => {
+      void calculateCroppedImage(imageSrc, crop, location).then((blob) => {
         setImageBlob(blob);
         setStep('alt');
       });
     },
-    [imageSrc],
+    [imageSrc, location],
   );
 
   const dispatch = useAppDispatch();
@@ -418,9 +418,14 @@ const StepAlt: FC<{
 async function calculateCroppedImage(
   imageSrc: string,
   crop: Area,
+  location: ImageLocation,
 ): Promise<Blob> {
   const image = await dataUriToImage(imageSrc);
-  const canvas = new OffscreenCanvas(crop.width, crop.height);
+  const maxWidth = location === 'avatar' ? 400 : 1500;
+  const scale = Math.min(1, maxWidth / crop.width);
+  const width = Math.round(crop.width * scale);
+  const height = Math.round(crop.height * scale);
+  const canvas = new OffscreenCanvas(width, height);
   const ctx = canvas.getContext('2d');
   if (!ctx) {
     throw new Error('Failed to get canvas context');
@@ -437,8 +442,8 @@ async function calculateCroppedImage(
     crop.height,
     0,
     0,
-    crop.width,
-    crop.height,
+    width,
+    height,
   );
 
   return canvas.convertToBlob();