From 87bb0e3b79bea436a3284ee0ce78916903df4ad6 Mon Sep 17 00:00:00 2001
From: youxia <243802688@qq.com>
Date: Thu, 11 Jan 2024 17:04:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=94=B9=E4=B8=BA=E9=80=9A=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/modals/ImageCropper.tsx    | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/web/src/components/modals/ImageCropper.tsx b/client/web/src/components/modals/ImageCropper.tsx
index 14fcb97c..28b98486 100644
--- a/client/web/src/components/modals/ImageCropper.tsx
+++ b/client/web/src/components/modals/ImageCropper.tsx
@@ -85,16 +85,22 @@ function getCroppedImg(
   const ctx = canvas.getContext('2d');
 
   if (!_isNil(ctx)) {
-    // 设置头像大小
-    const size = 256;
+    // 设定最大尺寸，可以提出来作为参数传入
+    const maxSize = 256;
 
-    canvas.width = size;
-    canvas.height = size;
+    // 计算最大尺寸
+    const size = Math.min(crop.width, crop.height, maxSize);
+
+    // 计算缩放比例
+    const scale = size / Math.max(crop.width, crop.height);
+
+    canvas.width = scale * crop.width;
+    canvas.height = scale * crop.height;
 
     // translate canvas context to a central location on image to allow rotating around the center.
-    ctx.translate(size / 2, size / 2);
+    ctx.translate(canvas.width / 2, canvas.width / 2);
     ctx.rotate(getRadianAngle(rotation));
-    ctx.translate(-size / 2, -size / 2);
+    ctx.translate(-canvas.width / 2, -canvas.width / 2);
 
     // draw rotated image and store data.
     ctx.drawImage(
@@ -105,8 +111,8 @@ function getCroppedImg(
       crop.height,
       0,
       0,
-      size,
-      size
+      canvas.width,
+      canvas.height
     );
   }