feat: EXIF 导出作为可选项

zhiweio · Nov 29, 2024 · 19d57cb · 19d57cb
1 parent 831ffd7
commit 19d57cb
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import type { ExifParamsForm } from './types'
 import { createFromIconfontCN, DownloadOutlined, PlusOutlined } from '@ant-design/icons'
-import { Button, Divider, Flex, Form, Input, Select, Slider, Space, Typography, Upload } from 'antd'
+import { Button, Divider, Flex, Form, Input, Select, Slider, Space, Switch, Tooltip, Typography, Upload } from 'antd'
 import { useEffect, useRef, useState } from 'react'
 import { useImageHandlers } from './hooks/useImageHandlers'
 
@@ -24,6 +24,7 @@ function App() {
   const formRef = useRef()
   const { imgRef, imgUrl, setImgUrl, formValue, setFormValue, handleAdd, handleDownload, handleFormChange, handleFontSizeChange, handleFontWeightChange, handleFontFamilyChange, handleScaleChange, handleExhibitionClick } = useImageHandlers(formRef, DefaultPictureExif)
   const [wasmLoaded, setWasmLoaded] = useState(false)
+  const [exifEnable, setExifEnable] = useState(false)
 
   const formValueRef = useRef<ExifParamsForm>(DefaultPictureExif)
 
@@ -155,7 +156,7 @@ function App() {
             type="primary"
             shape="round"
             icon={<DownloadOutlined />}
-            onClick={handleDownload}
+            onClick={() => handleDownload(exifEnable)}
           >
             导出照片
           </Button>
@@ -168,6 +169,15 @@ function App() {
           <Typography.Title level={4}>参数</Typography.Title>
         </div>
         <div className="props-option">
+          <Flex wrap gap="small" horizontal="true" justify="flex-start" align="center">
+            <Typography.Text className="switch-title">导出 EXIF</Typography.Text>
+            <Tooltip placement="topLeft" title="实验性功能：嵌入原图 EXIF 信息至导出图片，只支持 JPEG">
+              <Switch
+                defaultChecked={exifEnable}
+                onClick={() => setExifEnable(!exifEnable)}
+              />
+            </Tooltip>
+          </Flex>
           <Form
             ref={formRef}
             labelCol={{ span: 4 }}

diff --git a/src/hooks/useImageHandlers.ts b/src/hooks/useImageHandlers.ts
@@ -47,7 +47,7 @@ export function useImageHandlers(formRef: any, initialFormValue: ExifParamsForm)
   }
 
   // 导出图片
-  const handleDownload = async (): Promise<void> => {
+  const handleDownload = async (exifEnable: boolean): Promise<void> => {
     const previewDom = document.getElementById('preview')
     const zoomRatio = 4
 
@@ -72,7 +72,7 @@ export function useImageHandlers(formRef: any, initialFormValue: ExifParamsForm)
       }
 
       const link = document.createElement('a')
-      if (exifBlob) {
+      if (exifEnable && exifBlob) {
         if (uploadImgType === 'image/jpeg' || uploadImgType === 'image/jpg') {
           console.log('embed exif in jpg')
           const imgBlob = dataURLtoBlob(dataUrl)

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -230,3 +230,37 @@
     background-color: #0056b3; /* Darker blue on hover */
     transform: translateY(-2px); /* Lift effect on hover */
 }
+
+/* Switch Styles */
+.switch-title {
+    color: #aaa; /* Light gray color for the title */
+    font-family: var(--current-font-family), system-ui;
+    font-size: 12px; /* Font size for the title */
+}
+
+.ant-switch {
+    border-radius: 20px; /* Rounded corners for a modern look */
+    background-color: #e0e0e0; /* Light gray background color */
+    transition: background-color 0.3s ease; /* Smooth transition for background color */
+}
+
+.ant-switch-checked {
+    background-color: #a0c4ff; /* Light blue background color when checked */
+}
+
+.ant-switch-checked:hover {
+    background-color: #8ab8ff; /* Lighter shade on hover when checked */
+}
+
+/* Tooltip Styles */
+.ant-tooltip {
+    border-radius: 8px; /* Rounded corners for tooltips */
+    background-color: #f0f0f0; /* Light background for better contrast */
+    color: #333; /* Dark text for readability */
+    padding: 8px; /* Padding for better spacing */
+    font-size: 14px; /* Font size for tooltip text */
+}
+
+.ant-tooltip-arrow {
+    border-color: #f0f0f0; /* Match arrow color with tooltip background */
+}