diff --git a/app/javascript/mastodon/features/account_edit/modals/image_upload.tsx b/app/javascript/mastodon/features/account_edit/modals/image_upload.tsx index e63ac427c2a..db641ff1c0c 100644 --- a/app/javascript/mastodon/features/account_edit/modals/image_upload.tsx +++ b/app/javascript/mastodon/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 { 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();