From bc8ae9dc3287a25c8ffc3475de0225e1e68fd6b1 Mon Sep 17 00:00:00 2001
From: LH_R <song.lhlh@gmail.com>
Date: Sun, 17 Nov 2024 00:46:37 +0800
Subject: [PATCH 1/4] feat: add download image size config

---
 .../boardOperation/downloadImage/index.tsx    | 46 +++++++++++++++++--
 .../icons/boardOperation/image-size.svg       | 12 +++++
 src/i18n/en.json                              |  5 ++
 src/i18n/zh.json                              |  5 ++
 4 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 src/components/icons/boardOperation/image-size.svg

diff --git a/src/components/boardOperation/downloadImage/index.tsx b/src/components/boardOperation/downloadImage/index.tsx
index 20cc136..9aa7001 100644
--- a/src/components/boardOperation/downloadImage/index.tsx
+++ b/src/components/boardOperation/downloadImage/index.tsx
@@ -8,6 +8,7 @@ import { canvasPreview } from './canvasPreview'
 import Mask from '@/components/mask'
 import ImageRotate from '@/components/icons/boardOperation/image-rotate.svg?react'
 import ImageScale from '@/components/icons/boardOperation/image-scale.svg?react'
+import ImageSize from '@/components/icons/boardOperation/image-size.svg?react'
 
 import 'react-image-crop/dist/ReactCrop.css'
 
@@ -21,6 +22,7 @@ const DownloadImage: FC<IProps> = ({ url, showModal, setShowModal }) => {
   const { t } = useTranslation()
   const [saveImageRotate, updateSaveImageRotate] = useState(0)
   const [saveImageScale, updateSaveImageScale] = useState(1)
+  const [saveImageSize, updateSaveImageSize] = useState(1)
 
   const [completedCrop, setCompletedCrop] = useState<Crop | undefined>()
   const [crop, setCrop] = useState<Crop | undefined>()
@@ -71,8 +73,8 @@ const DownloadImage: FC<IProps> = ({ url, showModal, setShowModal }) => {
     const scaleY = image.naturalHeight / image.height
 
     const offscreen = new OffscreenCanvas(
-      completedCrop.width * scaleX,
-      completedCrop.height * scaleY
+      completedCrop.width * scaleX * saveImageSize,
+      completedCrop.height * scaleY * saveImageSize
     )
     const ctx = offscreen.getContext('2d')
     if (!ctx) {
@@ -140,7 +142,12 @@ const DownloadImage: FC<IProps> = ({ url, showModal, setShowModal }) => {
           <div className="w-full flex justify-between">
             <div className="w-[48%]">
               <div className="flex items-center">
-                <ImageRotate className="mr-[6px] shrink-0" />
+                <div
+                  className="mr-[6px] shrink-0 tooltip"
+                  data-tip={t('downloadImage.rotate')}
+                >
+                  <ImageRotate />
+                </div>
                 <input
                   className="range range-primary range-xs"
                   type="range"
@@ -155,7 +162,12 @@ const DownloadImage: FC<IProps> = ({ url, showModal, setShowModal }) => {
               </div>
 
               <div className="flex items-center mt-3">
-                <ImageScale className="mr-[12px] shrink-0" />
+                <div
+                  className="mr-[12px] shrink-0 tooltip"
+                  data-tip={t('downloadImage.scale')}
+                >
+                  <ImageScale />
+                </div>
                 <input
                   className="range range-primary range-xs"
                   type="range"
@@ -168,9 +180,33 @@ const DownloadImage: FC<IProps> = ({ url, showModal, setShowModal }) => {
                   }}
                 />
               </div>
+
+              <div className="flex items-center flex-wrap mt-3 gap-y-2">
+                <div
+                  className="mr-[12px] shrink-0 tooltip"
+                  data-tip={t('downloadImage.size')}
+                >
+                  <ImageSize />
+                </div>
+                <div className="tabs tabs-boxed bg-[#333C4D] shrink-0">
+                  {[1, 2, 3].map((value) => (
+                    <a
+                      key={value}
+                      className={`tab tab-sm flex-grow font-fredokaOne font-normal text-white ${
+                        saveImageSize === value ? 'tab-active' : ''
+                      }`}
+                      onClick={() => {
+                        updateSaveImageSize(value)
+                      }}
+                    >
+                      {`${value}x`}
+                    </a>
+                  ))}
+                </div>
+              </div>
             </div>
 
-            <div className="w-[48%] flex flex-wrap gap-4">
+            <div className="w-[48%] flex flex-wrap gap-x-4 gap-y-2 h-fit">
               <button
                 className="btn btn-ghost btn-outline btn-sm"
                 onClick={() => setShowModal(false)}
diff --git a/src/components/icons/boardOperation/image-size.svg b/src/components/icons/boardOperation/image-size.svg
new file mode 100644
index 0000000..01dc2cb
--- /dev/null
+++ b/src/components/icons/boardOperation/image-size.svg
@@ -0,0 +1,12 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="22px" height="22px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <rect width="48" height="48" fill="white" fill-opacity="0.01"/> <path d="M42 6V42M17 19L12 24M12 24L17 29M12 24H36M31 19L36 24M36 24L31 29M6 6L6 42" stroke="#65CC8A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
+</svg>
\ No newline at end of file
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b539d45..791e321 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -159,5 +159,10 @@
     "removeBackgroundProcessingSuccess": "Remove Background Processing Success",
     "restore": "Restore",
     "upload": "Upload"
+  },
+  "downloadImage": {
+    "rotate": "Rotate",
+    "scale": "Scale",
+    "size": "Size"
   }
 }
\ No newline at end of file
diff --git a/src/i18n/zh.json b/src/i18n/zh.json
index 32d852b..2f73488 100644
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@@ -159,5 +159,10 @@
     "removeBackgroundProcessingSuccess": "去除背景处理成功",
     "restore": "还原",
     "upload": "上传"
+  },
+  "downloadImage": {
+    "rotate": "旋转",
+    "scale": "缩放",
+    "size": "尺寸"
   }
 }
\ No newline at end of file

From 7fde0e730dfa0386331b59f5ba0599addbb0ae08 Mon Sep 17 00:00:00 2001
From: LH_R <song.lhlh@gmail.com>
Date: Sun, 17 Nov 2024 00:49:51 +0800
Subject: [PATCH 2/4] feat[git]: update .gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index a547bf3..54350c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+dev-dist
 
 # Editor directories and files
 .vscode/*

From 9040dd4e7c80050bb0495693af9255e327a2c896 Mon Sep 17 00:00:00 2001
From: LH_R <song.lhlh@gmail.com>
Date: Sun, 17 Nov 2024 00:50:50 +0800
Subject: [PATCH 3/4] docs: update CHANGELOG

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cfd0b0f..4c6a875 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 1.5.2
+
+### Feat
+
+- add download image size config
+
 # 1.5.1
 
 ### Feat

From b0f7bd22bb6419a77550af8fb42752c306274701 Mon Sep 17 00:00:00 2001
From: LH_R <song.lhlh@gmail.com>
Date: Sun, 17 Nov 2024 00:51:27 +0800
Subject: [PATCH 4/4] feat: update version

---
 package.json       | 2 +-
 src/store/files.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0489fb7..ac46ef3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "paint-board",
   "private": true,
-  "version": "1.5.1",
+  "version": "1.5.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/store/files.ts b/src/store/files.ts
index 694be13..8f77a8e 100644
--- a/src/store/files.ts
+++ b/src/store/files.ts
@@ -55,7 +55,7 @@ interface FileAction {
 }
 
 const initId = uuidv4()
-export const BOARD_VERSION = '1.5.1'
+export const BOARD_VERSION = '1.5.2'
 
 const useFileStore = create<FileState & FileAction>()(
   persist(