fix: adjust image size when paste

src/pages/playground/components/thumb-img.tsx

@@ -1,5 +1,5 @@
+import AutoImage from '@/components/auto-image';
 import { CloseCircleOutlined, EyeOutlined } from '@ant-design/icons';
-import { Image } from 'antd';
 import _ from 'lodash';
 import React, { useCallback } from 'react';
 import '../style/thumb-img.less';
@@ -32,10 +32,9 @@ const ThumbImg: React.FC<{
             }}
           >
             <span className="img">
-              <Image
+              <AutoImage
                 src={item.dataUrl}
-                width={item.width}
-                height={item.height}
+                height={100}
                 preview={{
                   mask: <EyeOutlined />
                 }}

src/pages/playground/components/upload-img.tsx

@@ -3,12 +3,11 @@ import { useIntl } from '@umijs/max';
 import { Button, Tooltip, Upload } from 'antd';
 import type { UploadFile } from 'antd/es/upload';
 import { RcFile } from 'antd/es/upload';
-import { debounce, round } from 'lodash';
+import { debounce } from 'lodash';
 import React, { useCallback, useRef } from 'react';
 
 interface UploadImgProps {
   size?: 'small' | 'middle' | 'large';
-  height?: number;
   handleUpdateImgList: (
     imgList: { dataUrl: string; uid: number | string }[]
   ) => void;
@@ -16,7 +15,6 @@ interface UploadImgProps {
 
 const UploadImg: React.FC<UploadImgProps> = ({
   handleUpdateImgList,
-  height = 100,
   size = 'small'
 }) => {
   const intl = useIntl();
@@ -38,22 +36,6 @@ const UploadImg: React.FC<UploadImgProps> = ({
     [handleUpdateImgList, intl]
   );
 
-  const getImgDimensions = useCallback(
-    (file: any): Promise<{ ratio: number }> => {
-      return new Promise((resolve) => {
-        const img = new Image();
-        img.onload = () => {
-          resolve({ ratio: round(img.width / img.height, 2) });
-        };
-        img.onerror = () => {
-          resolve({ ratio: 1 });
-        };
-        img.src = URL.createObjectURL(file);
-      });
-    },
-    []
-  );
-
   const handleChange = useCallback(
     async (info: any) => {
       const { fileList } = info;
@@ -62,12 +44,8 @@ const UploadImg: React.FC<UploadImgProps> = ({
         fileList.map(async (item: UploadFile) => {
           if (item.originFileObj && !item.url) {
             const base64 = await getBase64(item.originFileObj as RcFile);
-            const { ratio } = await getImgDimensions(
-              item.originFileObj as RcFile
-            );
 
             item.url = base64;
-            item.ratio = ratio;
           }
           return item;
         })
@@ -79,9 +57,7 @@ const UploadImg: React.FC<UploadImgProps> = ({
           .map((item: UploadFile) => {
             return {
               dataUrl: item.url as string,
-              uid: item.uid,
-              height: height,
-              width: height * item.ratio
+              uid: item.uid
             };
           });
 

src/pages/playground/style/thumb-img.less

@@ -1,8 +1,6 @@
 .thumb-img {
   position: relative;
   display: flex;
-  width: 56px;
-  height: 56px;
 
   .img {
     display: flex;