Fix oversized profile image crop uploads (#39958)

This commit is contained in:
Sharlayan 2026-07-28 22:49:32 +09:00 committed by Tarrien
parent ced453a5fe
commit 6c6d06a2a1

View File

@ -94,12 +94,12 @@ export const ImageUploadModal: FC<
setStep('select'); setStep('select');
return; return;
} }
void calculateCroppedImage(imageSrc, crop).then((blob) => { void calculateCroppedImage(imageSrc, crop, location).then((blob) => {
setImageBlob(blob); setImageBlob(blob);
setStep('alt'); setStep('alt');
}); });
}, },
[imageSrc], [imageSrc, location],
); );
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -418,9 +418,14 @@ const StepAlt: FC<{
async function calculateCroppedImage( async function calculateCroppedImage(
imageSrc: string, imageSrc: string,
crop: Area, crop: Area,
location: ImageLocation,
): Promise<Blob> { ): Promise<Blob> {
const image = await dataUriToImage(imageSrc); 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'); const ctx = canvas.getContext('2d');
if (!ctx) { if (!ctx) {
throw new Error('Failed to get canvas context'); throw new Error('Failed to get canvas context');
@ -437,8 +442,8 @@ async function calculateCroppedImage(
crop.height, crop.height,
0, 0,
0, 0,
crop.width, width,
crop.height, height,
); );
return canvas.convertToBlob(); return canvas.convertToBlob();