Merge pull request #49 from LHRUN/dev

Feature/1.5.3
LHRUN · Nov 23, 2024 · 029c1de · 029c1de
2 parents 7c6d954 + 0b5f360
commit 029c1de
Show file tree

Hide file tree

Showing 15 changed files with 657 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 1.5.3
+
+- upload image
+  -  add image segmentation 
+
 # 1.5.2
 
 ### Feat

diff --git a/README.md b/README.md
@@ -59,7 +59,7 @@ Link: [https://songlh.top/paint-board/](https://songlh.top/paint-board/)
 + Multifunction Menu
   - The bottom left button shows the current zoom ratio in real time, click it to reset the zoom ratio.
   - The list of buttons in the center, in order from left to right, are: Undo, Redo, Copy Current Selection, Delete Current Selection, Draw Text, Upload Image, Clear Drawing, Save as Image, and Open File List.
-    - Support removing background for uploading images (browser needs to support WebGPU)
+    - Upload images with support for background remove, image segmentation. This function needs WebGPU support in your browser.
     - Save as image supports custom configurations. Rotate, Scale, Crop
   - PC:
     - Hold down the Space key and click the left mouse button to move the canvas, scroll the mouse wheel to zoom the canvas.

diff --git a/README.zh.md b/README.zh.md
@@ -55,7 +55,7 @@ Link: [https://songlh.top/paint-board/](https://songlh.top/paint-board/)
 + 多功能菜单
   - 左下角按钮实时显示当前缩放比例，点击即可重置缩放比例。
   - 中间按钮列表按从左到右的功能分别为：撤销、反撤销、复制当前选择内容、删除当前选择内容、绘制文字、上传图片、清除绘制内容、保存为图片、打开文件列表。  
-    - 上传图片支持去除背景(浏览器需支持WebGPU)
+    - 上传图片支持去除背景, 图像分割. 此功能需要浏览器支持WebGPU
     - 保存为图片支持自定义配置. 旋转, 缩放, 裁切
   - 电脑端：
     - 按住 Space 键并点击鼠标左键可移动画布，滚动鼠标滚轮实现画布缩放。

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "paint-board",
   "private": true,
-  "version": "1.5.2",
+  "version": "1.5.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/components/boardOperation/downloadImage/index.tsx b/src/components/boardOperation/downloadImage/index.tsx
@@ -106,6 +106,8 @@ const DownloadImage: FC<IProps> = ({ url, showModal, setShowModal }) => {
     if (hiddenAnchorRef.current) {
       hiddenAnchorRef.current.href = blobUrlRef.current
       hiddenAnchorRef.current.click()
+
+      setShowModal(false)
     }
   }
 
@@ -141,7 +143,31 @@ const DownloadImage: FC<IProps> = ({ url, showModal, setShowModal }) => {
         {completedCrop && (
           <div className="w-full flex justify-between">
             <div className="w-[48%]">
-              <div className="flex items-center">
+              <div className="flex items-center flex-wrap 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 className="flex items-center mt-3">
                 <div
                   className="mr-[6px] shrink-0 tooltip"
                   data-tip={t('downloadImage.rotate')}
@@ -180,30 +206,6 @@ 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-x-4 gap-y-2 h-fit">