feat: generate images

src/components/auto-image/index.less

@@ -0,0 +1,21 @@
+.toolbar-wrapper {
+  padding: 0 24px;
+  color: rgba(255, 255, 255, 65%);
+  font-size: 16px;
+  background-color: rgba(0, 0, 0, 10%);
+  border-radius: 100px;
+}
+
+.toolbar-wrapper .anticon {
+  padding: 12px;
+  cursor: pointer;
+}
+
+.toolbar-wrapper .anticon[disabled] {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.toolbar-wrapper .anticon:hover {
+  opacity: 0.3;
+}

src/components/auto-image/index.tsx

@@ -1,6 +1,17 @@
-import { Image as AntImage, ImageProps } from 'antd';
+import {
+  DownloadOutlined,
+  EyeOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+  SwapOutlined,
+  UndoOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined
+} from '@ant-design/icons';
+import { Image as AntImage, ImageProps, Space } from 'antd';
 import { round } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
+import './index.less';
 
 const AutoImage: React.FC<ImageProps & { height: number }> = (props) => {
   const { height = 100, ...rest } = props;
@@ -24,11 +35,58 @@ const AutoImage: React.FC<ImageProps & { height: number }> = (props) => {
     setWidth(height * ratio);
   }, [getImgRatio, height, props.src]);
 
+  const onDownload = () => {
+    const url = props.src || '';
+    const filename = Date.now() + '';
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  };
+
   useEffect(() => {
     handleOnLoad();
   }, [handleOnLoad]);
 
-  return <AntImage {...rest} height={height} width={width} />;
+  return (
+    <AntImage
+      {...rest}
+      height={height}
+      width={width}
+      preview={{
+        mask: <EyeOutlined />,
+        toolbarRender: (
+          _,
+          {
+            transform: { scale },
+            actions: {
+              onFlipY,
+              onFlipX,
+              onRotateLeft,
+              onRotateRight,
+              onZoomOut,
+              onZoomIn,
+              onReset
+            }
+          }
+        ) => (
+          <Space size={12} className="toolbar-wrapper">
+            <DownloadOutlined onClick={onDownload} />
+            <SwapOutlined rotate={90} onClick={onFlipY} />
+            <SwapOutlined onClick={onFlipX} />
+            <RotateLeftOutlined onClick={onRotateLeft} />
+            <RotateRightOutlined onClick={onRotateRight} />
+            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
+            <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
+            <UndoOutlined onClick={onReset} />
+          </Space>
+        )
+      }}
+    />
+  );
 };
 
 export default AutoImage;