修改一些细节

slince-zero · May 14, 2024 · 666784a · 666784a
1 parent 7862b1a
commit 666784a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/src/context/imageDownload.tsx b/src/context/imageDownload.tsx
@@ -1,14 +1,23 @@
-import { ReactNode, createContext, useRef, MutableRefObject } from 'react'
+import {
+  ReactNode,
+  createContext,
+  useRef,
+  MutableRefObject,
+  useContext,
+} from 'react'
 import domtoimage from 'dom-to-image'
+import { ImgContext } from '.'
 // 首先定义Context的类型
 interface ImageDownloadContextProps {
   imageContainerRef: any // 适当地改变类型以匹配`useRef`的返回类型
+  newRef: any
   handleDownloadImage: (type: 'JPG' | 'PNG' | 'SVG') => void // 或者具有更详细类型的函数签名
 }
 
 // 使用断言来定义初始值，确保类型正确
 export const ImageDownloadContext = createContext<ImageDownloadContextProps>({
   imageContainerRef: {} as MutableRefObject<HTMLDivElement>, // 使用类型断言确保初始值类型正确
+  newRef: {} as MutableRefObject<HTMLDivElement>,
   handleDownloadImage: () => {}, // 提供一个noop(无操作)函数作为初始值
 })
 
@@ -17,10 +26,19 @@ export const ImageDownloadProvider = ({
 }: {
   children: ReactNode
 }) => {
+  const { isOpenSelectArea } = useContext(ImgContext)
+
   const imageContainerRef = useRef<HTMLDivElement>(null)
+  const newRef = useRef<HTMLDivElement>(null)
 
   async function handleDownloadImage(type: 'JPG' | 'PNG' | 'SVG') {
-    const node = imageContainerRef.current
+    // const node = imageContainerRef.current
+    let node
+    if (isOpenSelectArea) {
+      node = newRef.current
+    } else {
+      node = imageContainerRef.current
+    }
 
     if (node) {
       try {
@@ -67,7 +85,11 @@ export const ImageDownloadProvider = ({
 
   return (
     <ImageDownloadContext.Provider
-      value={{ imageContainerRef, handleDownloadImage }}>
+      value={{
+        imageContainerRef,
+        handleDownloadImage,
+        newRef,
+      }}>
       {children}
     </ImageDownloadContext.Provider>
   )

diff --git a/src/page/center/index.tsx b/src/page/center/index.tsx
@@ -21,7 +21,7 @@ export default function CenterBoard() {
     isOpenSelectArea,
   } = useContext(ImgContext)
 
-  const { imageContainerRef } = useContext(ImageDownloadContext)
+  const { imageContainerRef, newRef } = useContext(ImageDownloadContext)
 
   const [isLoading, setIsLoading] = useState(false)
 
@@ -41,8 +41,6 @@ export default function CenterBoard() {
   //   } else if (boardTool === 'rubber') {
   //     centerBoardElement.style.cursor = 'url(/rubber.svg),auto'
   //   }
-  // }, [boardTool])
-  console.log(proportionValue, 'proportionValue')
 
   return (
     <div
@@ -86,6 +84,8 @@ export default function CenterBoard() {
       )}
 
       <div
+        ref={newRef}
+        className='screenCapture'
         style={{
           position: 'absolute',
           width: '100%',

diff --git a/src/page/right/index.tsx b/src/page/right/index.tsx
@@ -432,7 +432,6 @@ export default function RightBoard() {
               </Dropdown>
 
               {/* 截图选区 */}
-              {/* isOpenSelectArea, setIsOpenSelectArea */}
               <Button
                 isIconOnly
                 className={isOpenSelectArea !== false ? ' bg-gray-400' : ''}