From c8e5102092491ed996af87bf372b419ca3b6f765 Mon Sep 17 00:00:00 2001
From: youxia <243802688@qq.com>
Date: Fri, 12 Jan 2024 10:09:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=B4=E5=83=8F=E6=9C=80=E5=A4=A7?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E8=AE=BE=E5=AE=9A=E4=B8=BA256?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/web/src/components/ImagePicker.tsx         |  2 ++
 client/web/src/components/ImageUploader.tsx       | 11 ++++++++++-
 client/web/src/components/modals/ImageCropper.tsx |  7 ++++++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/client/web/src/components/ImagePicker.tsx b/client/web/src/components/ImagePicker.tsx
index 8a7f0296..bb42dec2 100644
--- a/client/web/src/components/ImagePicker.tsx
+++ b/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);
diff --git a/client/web/src/components/ImageUploader.tsx b/client/web/src/components/ImageUploader.tsx
index a0c2effc..21390afe 100644
--- a/client/web/src/components/ImageUploader.tsx
+++ b/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';
diff --git a/client/web/src/components/modals/ImageCropper.tsx b/client/web/src/components/modals/ImageCropper.tsx
index d7c83df0..a6630127 100644
--- a/client/web/src/components/modals/ImageCropper.tsx
+++ b/client/web/src/components/modals/ImageCropper.tsx
@@ -11,9 +11,11 @@ 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 });
@@ -21,7 +23,10 @@ export const ImageCropperModal: React.FC<{
   const handleConfirm = async () => {
     const blobUrl = await getCroppedImg(
       await createImage(props.imageUrl),
-      area
+      area,
+      0,
+      'newFile.jpeg',
+      maxSize
     );
     props.onConfirm(blobUrl);
   };