Merge pull request #47 from LHRUN/dev

Feature/1.5.2

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+dev-dist
 
 # Editor directories and files
 .vscode/*

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.5.2
+
+### Feat
+
+- add download image size config
+
 # 1.5.1
 
 ### Feat

package.json

@@ -1,7 +1,7 @@
 {
   "name": "paint-board",
   "private": true,
-  "version": "1.5.1",
+  "version": "1.5.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

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)}

src/i18n/en.json

@@ -159,5 +159,10 @@
     "removeBackgroundProcessingSuccess": "Remove Background Processing Success",
     "restore": "Restore",
     "upload": "Upload"
+  },
+  "downloadImage": {
+    "rotate": "Rotate",
+    "scale": "Scale",
+    "size": "Size"
   }
 }

src/i18n/zh.json

@@ -159,5 +159,10 @@
     "removeBackgroundProcessingSuccess": "去除背景处理成功",
     "restore": "还原",
     "upload": "上传"
+  },
+  "downloadImage": {
+    "rotate": "旋转",
+    "scale": "缩放",
+    "size": "尺寸"
   }
 }

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(