fix: 头像最大尺寸设定为256

Author: hxg2050

client/web/src/components/ImagePicker.tsx

@@ -10,6 +10,7 @@ interface ImagePickerProps extends PropsWithChildren {
   className?: string;
   imageUrl?: string; // 初始image url, 仅children为空时生效
   aspect?: number;
+  maxSize?: number;
   onChange?: (blobUrl: string) => void;
   disabled?: boolean; // 禁用选择
 }
@@ -43,6 +44,7 @@ export const ImagePicker: React.FC<ImagePickerProps> = React.memo((props) => {
                 <ImageCropperModal
                   imageUrl={reader.result.toString()}
                   aspect={props.aspect}
+                  maxSize={props.maxSize}
                   onConfirm={(croppedImageBlobUrl) => {
                     closeModal(key);
                     updateAvatar(croppedImageBlobUrl);

client/web/src/components/ImageUploader.tsx

@@ -7,6 +7,7 @@ import { ImagePicker } from './ImagePicker';
 interface ImageUploaderProps extends PropsWithChildren {
   circle?: boolean;
   aspect?: number;
+  maxSize?: number;
   className?: string;
   onUploadSuccess: (fileInfo: UploadFileResult) => void;
 }
@@ -39,6 +40,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = React.memo(
           'rounded-full': props.circle,
         })}
         aspect={aspect}
+        maxSize={props.maxSize}
         disabled={loading}
         onChange={handlePickImage}
       >
@@ -58,7 +60,14 @@ ImageUploader.displayName = 'ImageUploader';
 
 export const AvatarUploader: React.FC<ImageUploaderProps> = React.memo(
   (props) => {
-    return <ImageUploader aspect={1} circle={true} {...props}></ImageUploader>;
+    return (
+      <ImageUploader
+        aspect={1}
+        maxSize={256}
+        circle={true}
+        {...props}
+      ></ImageUploader>
+    );
   }
 );
 AvatarUploader.displayName = 'AvatarUploader';

client/web/src/components/modals/ImageCropper.tsx

@@ -11,17 +11,22 @@ import { ModalWrapper } from '../Modal';
 export const ImageCropperModal: React.FC<{
   imageUrl: string;
   aspect?: number;
+  maxSize?: number;
   onConfirm: (croppedImageBlobUrl: string) => void;
 }> = React.memo((props) => {
   const aspect = props.aspect ?? 1;
+  const maxSize = props.maxSize ?? Infinity;
   const [crop, setCrop] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
   const [area, setArea] = useState<Area>({ width: 0, height: 0, x: 0, y: 0 });
 
   const handleConfirm = async () => {
     const blobUrl = await getCroppedImg(
       await createImage(props.imageUrl),
-      area
+      area,
+      0,
+      'newFile.jpeg',
+      maxSize
     );
     props.onConfirm(blobUrl);
   };