fix(xtools): 修改了一下图片展示和下载的相关代码

src/components/ImageDownload/index.tsx

@@ -0,0 +1,75 @@
+import { Box, SxProps } from '@mui/material';
+import React, { useCallback } from 'react';
+
+interface Props {
+  src: string;
+  sx?: SxProps;
+}
+
+const Module: React.FC<Props> = (props) => {
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (props.src) {
+        const extName = /^data:[a-zA-Z0-9]+\/([a-zA-Z0-9]+)[^;]*;base64,/.exec(
+          props.src
+        );
+        if (extName && extName[1]) {
+          const aTag = document.createElement('a');
+          aTag.style.display = 'none';
+          aTag.href = props.src;
+          aTag.download = '保存图片.' + extName[1];
+          document.body.appendChild(aTag);
+          aTag.click();
+        }
+      }
+    },
+    [props.src]
+  );
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        padding: '20px',
+        position: 'relative',
+        display: 'inline-block',
+        border: 'black solid 1px',
+        borderColor: 'rgba(0, 0, 0, 0.2)',
+        borderRadius: '4px',
+        ...props.sx,
+      }}
+    >
+      {props.src ? (
+        <img src={props.src} style={{ width: '100%', height: '100%' }}></img>
+      ) : (
+        <></>
+      )}
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          zIndex: '1',
+          cursor: 'pointer',
+          color: 'rgba(0,0,0,0)',
+          fontSize: '14px',
+          textAlign: 'center',
+          userSelect: 'none',
+          paddingTop: '20px',
+          '&:hover': {
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            color: props.src ? 'rgba(255,255,255,1)' : '',
+          },
+        }}
+        onClick={handleClick}
+      >
+        {' '}
+        点击下载图片{' '}
+      </Box>
+    </Box>
+  );
+};
+
+export default Module;

src/pages/img2base64.tsx

@@ -7,6 +7,7 @@ import TextField from '@mui/material/TextField';
 
 import React, { useCallback, useState } from 'react';
 import { styled } from '@mui/material/styles';
+import ImageDownload from '@/components/ImageDownload';
 
 const VisuallyHiddenInput = styled('input')({
   clip: 'rect(0 0 0 0)',
@@ -155,7 +156,7 @@ const ImgBase64: React.FC = () => {
               >
                 转换
               </Button>
-              <OutImg src={decodeOut} />
+              <ImageDownload src={decodeOut} />
             </Stack>
           </TabPanel>
         </TabContext>

src/pages/img_radius.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import MainContent from '@/components/MainContent';
 import { Slider, Grid, Button, Box, IconButton } from '@mui/material';
 import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
+import ImageDownload from '@/components/ImageDownload';
 
 function ImageWithBorderRadiusTool() {
   const [imageFile, setImageFile] = useState(null);
@@ -126,18 +127,7 @@ function ImageWithBorderRadiusTool() {
             overflow: 'auto',
           }}
         >
-          {imagePreviewUrl && (
-            <img
-              src={imagePreviewUrl}
-              alt='Preview'
-              style={{
-                maxHeight: '80%',
-                maxWidth: '100%',
-                height: 'auto',
-                width: 'auto',
-              }}
-            />
-          )}
+          {imagePreviewUrl && <ImageDownload src={imagePreviewUrl} />}
           <canvas ref={canvasRef} style={{ display: 'none' }} />
         </Box>
       </>

src/pages/img_sharp.tsx

@@ -6,6 +6,7 @@ import TabList from '@mui/lab/TabList';
 import React, { useCallback, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { shrinkImage } from 'shrinkpng';
+import ImageDownload from '@/components/ImageDownload';
 
 const VisuallyHiddenInput = styled('input')({
   clip: 'rect(0 0 0 0)',
@@ -83,17 +84,6 @@ const ImgSharp: React.FC = () => {
     [f, quality]
   );
 
-  const handleDownload = () => {
-    const url = window.URL.createObjectURL(outF as File);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    window.URL.revokeObjectURL(url);
-  };
-
   async function doSharp(q: number, file: File) {
     const _file = await shrinkImage(file, { quality: q });
     const reader = new FileReader();
@@ -162,23 +152,7 @@ const ImgSharp: React.FC = () => {
                   压缩后大小: {sharpSize}
                 </Grid>
               </Grid>
-              {out ? (
-                <Button
-                  component='label'
-                  variant='outlined'
-                  onClick={handleDownload}
-                  sx={{
-                    borderRadius: '3px',
-                    minHeight: '100px',
-                    padding: '0',
-                    img: { width: '100%' },
-                  }}
-                >
-                  <UploadImg src={out} />
-                </Button>
-              ) : (
-                <></>
-              )}
+              {out ? <ImageDownload src={out} /> : <></>}
             </Stack>
           </TabPanel>
         </TabContext>

src/pages/uncolor.tsx

@@ -1,3 +1,4 @@
+import ImageDownload from '@/components/ImageDownload';
 import MainContent from '@/components/MainContent';
 import { Box, Button, Stack } from '@mui/material';
 
@@ -21,15 +22,6 @@ const UploadImg = styled('img')({
   maxWidth: '100%',
 });
 
-const OutImg = styled('img')({
-  Width: '100%',
-  border: 'black solid 1px',
-  borderColor: 'rgba(0, 0, 0, 0.1)',
-  margin: '20px',
-  padding: '20px',
-  borderRadius: '3px',
-});
-
 const MySpan = styled('span')({});
 
 const ImgBase64: React.FC = () => {
@@ -101,7 +93,7 @@ const ImgBase64: React.FC = () => {
             <UploadImg src={imageIn} />
             <VisuallyHiddenInput type='file' onChange={handleSelectFile} />
           </Button>
-          <OutImg src={uncolorOut} />
+          <ImageDownload src={uncolorOut} />
         </Stack>
       </Box>
     </MainContent>

src/pages/watermark.tsx

@@ -1,10 +1,10 @@
 import MainContent from '@/components/MainContent';
 import WatermarkComponent from '@/components/Watermark';
-import { downloadFile } from '@/components/Watermark/utils';
 import { Box, Button, Stack, TextField } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
 import { styled } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
+import ImageDownload from '@/components/ImageDownload';
 
 const VisuallyHiddenInput = styled('input')({
   clip: 'rect(0 0 0 0)',
@@ -18,19 +18,6 @@ const VisuallyHiddenInput = styled('input')({
   width: 1,
 });
 
-const OutImg = styled('img')({
-  width: '100%',
-});
-
-const OutImgWrap = styled('div')({
-  width: '100%',
-  border: 'black solid 1px',
-  borderColor: 'rgba(0, 0, 0, 0.1)',
-  marginTop: '20px',
-  padding: '20px',
-  borderRadius: '3px',
-});
-
 const Watermark: React.FC = () => {
   const {
     control,
@@ -110,9 +97,6 @@ const Watermark: React.FC = () => {
     image1.src = image1Url;
   };
 
-  const handleDownload = () => {
-    downloadFile(mergeImage, '');
-  };
   useEffect(() => {
     onMergeImage(imageIn, markImage);
   }, [watchAllFields.offset[0], watchAllFields.offset[1]]);
@@ -289,11 +273,8 @@ const Watermark: React.FC = () => {
           </Box>
         </Stack>
         {imageIn && (
-          <OutImgWrap>
-            <Button variant='contained' sx={{ mb: 1 }} onClick={handleDownload}>
-              图片下载
-            </Button>
-            <OutImg src={mergeImage} />
+          <Box>
+            <ImageDownload src={mergeImage} />
             <WatermarkComponent
               content={watchAllFields.context}
               font={{
@@ -303,7 +284,7 @@ const Watermark: React.FC = () => {
               gap={watchAllFields.gap as [number, number]}
               onWaterMarkChange={onWaterMarkChange}
             ></WatermarkComponent>
-          </OutImgWrap>
+          </Box>
         )}
       </Box>
     </MainContent>