From 27704cd5f7971df176dbcc2cf043c7a4e676cf7d Mon Sep 17 00:00:00 2001
From: youxia <243802688@qq.com>
Date: Thu, 11 Jan 2024 10:16:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor=EF=BC=9A=E7=AE=80=E5=8C=96=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E8=AE=A1=E7=AE=97=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E6=9C=80=E5=A4=A7=E5=B0=BA=E5=AF=B8=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=E5=A4=B4=E5=83=8F=E8=A3=81=E5=89=AA?=
 =?UTF-8?q?=E5=87=BA=E6=9D=A5=E5=A4=AA=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/client/web/src/components/modals/ImageCropper.tsx b/client/web/src/components/modals/ImageCropper.tsx
index dcea4e53..14fcb97c 100644
--- a/client/web/src/components/modals/ImageCropper.tsx
+++ b/client/web/src/components/modals/ImageCropper.tsx
@@ -85,36 +85,28 @@ function getCroppedImg(
   const ctx = canvas.getContext('2d');
 
   if (!_isNil(ctx)) {
-    const maxSize = Math.max(image.width, image.height);
-    const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));
+    // 设置头像大小
+    const size = 256;
 
-    // set each dimensions to double largest dimension to allow for a safe area for the
-    // image to rotate in without being clipped by canvas context
-    canvas.width = safeArea;
-    canvas.height = safeArea;
+    canvas.width = size;
+    canvas.height = size;
 
     // translate canvas context to a central location on image to allow rotating around the center.
-    ctx.translate(safeArea / 2, safeArea / 2);
+    ctx.translate(size / 2, size / 2);
     ctx.rotate(getRadianAngle(rotation));
-    ctx.translate(-safeArea / 2, -safeArea / 2);
+    ctx.translate(-size / 2, -size / 2);
 
     // draw rotated image and store data.
     ctx.drawImage(
       image,
-      safeArea / 2 - image.width * 0.5,
-      safeArea / 2 - image.height * 0.5
-    );
-    const data = ctx.getImageData(0, 0, safeArea, safeArea);
-
-    // set canvas width to final desired crop size - this will clear existing context
-    canvas.width = crop.width;
-    canvas.height = crop.height;
-
-    // paste generated rotate image with correct offsets for x,y crop values.
-    ctx.putImageData(
-      data,
-      Math.round(0 - safeArea / 2 + image.width * 0.5 - crop.x),
-      Math.round(0 - safeArea / 2 + image.height * 0.5 - crop.y)
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      size,
+      size
     );
   }