From ea8a59d0b01b4edaa8aea6ceb4591e2e4c1cc001 Mon Sep 17 00:00:00 2001
From: kunkeji <49889250+kunkeji@users.noreply.github.com>
Date: Fri, 29 Nov 2024 17:15:46 +0800
Subject: [PATCH] Image compression (#3749)

### What problem does this PR solve?

The uploaded avatar has been compressed to preserve transparency while
meeting the length requirements for the 'text' type. The current
compressed size is 100x100 pixels.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/utils/file-util.ts | 42 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/web/src/utils/file-util.ts b/web/src/utils/file-util.ts
index 8a61217bf..18306c1e5 100644
--- a/web/src/utils/file-util.ts
+++ b/web/src/utils/file-util.ts
@@ -5,7 +5,41 @@ export const transformFile2Base64 = (val: any): Promise<any> => {
     const reader = new FileReader();
     reader.readAsDataURL(val);
     reader.onload = (): void => {
-      resolve(reader.result);
+      // 创建图片对象
+      const img = new Image();
+      img.src = reader.result as string;
+      
+      img.onload = () => {
+        // 创建canvas
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // 计算压缩后的尺寸,最大宽高设为800px
+        let width = img.width;
+        let height = img.height;
+        const maxSize = 100;
+        
+        if (width > height && width > maxSize) {
+          height = (height * maxSize) / width;
+          width = maxSize;
+        } else if (height > maxSize) {
+          width = (width * maxSize) / height;
+          height = maxSize;
+        }
+        
+        // 设置canvas尺寸
+        canvas.width = width;
+        canvas.height = height;
+        
+        // 绘制图片
+        ctx?.drawImage(img, 0, 0, width, height);
+        
+        // 转换为base64,保持原始格式和透明度
+        const compressedBase64 = canvas.toDataURL('image/png');
+        resolve(compressedBase64);
+      };
+      
+      img.onerror = reject;
     };
     reader.onerror = reject;
   });
@@ -15,6 +49,7 @@ export const transformBase64ToFile = (
   dataUrl: string,
   filename: string = 'file',
 ) => {
+  console.log('transformBase64ToFile', dataUrl);
   let arr = dataUrl.split(','),
     bstr = atob(arr[1]),
     n = bstr.length,
@@ -30,6 +65,7 @@ export const transformBase64ToFile = (
 };
 
 export const normFile = (e: any) => {
+  console.log('normFile', e);
   if (Array.isArray(e)) {
     return e;
   }
@@ -37,6 +73,7 @@ export const normFile = (e: any) => {
 };
 
 export const getUploadFileListFromBase64 = (avatar: string) => {
+  console.log('getUploadFileListFromBase64', avatar);
   let fileList: UploadFile[] = [];
 
   if (avatar) {
@@ -47,6 +84,7 @@ export const getUploadFileListFromBase64 = (avatar: string) => {
 };
 
 export const getBase64FromUploadFileList = async (fileList?: UploadFile[]) => {
+  console.log('getBase64FromUploadFileList', fileList);
   if (Array.isArray(fileList) && fileList.length > 0) {
     const file = fileList[0];
     const originFileObj = file.originFileObj;
@@ -71,6 +109,7 @@ export const downloadFile = ({
   filename?: string;
   target?: string;
 }) => {
+  console.log('downloadFile', url);
   const downloadElement = document.createElement('a');
   downloadElement.style.display = 'none';
   downloadElement.href = url;
@@ -89,6 +128,7 @@ export const downloadFile = ({
 const Units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
 export const formatBytes = (x: string | number) => {
+  console.log('formatBytes', x);
   let l = 0,
     n = (typeof x === 'string' ? parseInt(x, 10) : x) || 0;