Thu Feb 6 18:16:00 CST 2025 inscode

src/tiny-image-editor/src/components/Upload.tsx

@@ -7,24 +7,9 @@ import {fabric} from 'fabric';
 import ArrowClass from '../helpers/Arrow';
 
 
-function annotationsInit(imgData,canvas,historyRef,){
-              // 获取当前图片和画布尺寸
-                const currentImageWidth = canvas.backgroundImage.width;
-                const currentImageHeight = canvas.backgroundImage.height;
-                const currentCanvasWidth = canvas.getWidth();
-                const currentCanvasHeight = canvas.getHeight();
-                let imageWidth = imgData.imageWidth||imgData.imgWidth;
-                let imageHeight = imgData.imageHeight||imgData.imgHeight;
-                  // 计算缩放比例
-
-                    const originalScaleX = imgData.originalCanvasWidth / imageWidth;
-                    const originalScaleY = imgData.originalCanvasHeight / imageHeight;
-                    const currentScaleX = currentCanvasWidth / currentImageWidth;
-                    const currentScaleY = currentCanvasHeight / currentImageHeight;
-
-                    const scaleX = currentScaleX / originalScaleX;
-                    const scaleY = currentScaleY / originalScaleY;
+function annotationsInit(imgData,canvas,historyRef,positionInfo){
              
+            const { scaleX,scaleY} = positionInfo
                 console.log("scaleX,scaleY ",scaleX,scaleY,currentCanvasWidth,currentCanvasHeight,currentImageWidth,currentImageHeight,imageWidth,imageHeight,imgData)
            // 遍历标注信息，重新创建元素并添加到画布上
                 imgData.annotations.forEach((annotation) => {
@@ -136,25 +121,41 @@ export const useUpload = () => {
     const canvas = canvasInstanceRef.current;
     if(canvasEl?.current&&typeof e === 'string'){
       let imgObj = new Image();
+      if(imgData){
+            // 获取当前图片和画布尺寸
+                const currentImageWidth = canvas.backgroundImage.width;
+                const currentImageHeight = canvas.backgroundImage.height;
+                const currentCanvasWidth = canvas.getWidth();
+                const currentCanvasHeight = canvas.getHeight();
+                let imageWidth = imgData.imageWidth||imgData.imgWidth;
+                let imageHeight = imgData.imageHeight||imgData.imgHeight;
+                  // 计算缩放比例
 
-       /**  const newScaleFactor = Math.min(currentCanvasWidth / img.width, currentCanvasHeight / img.height);
-                    img.set({
-                        left: 0,
-                        top: 0,
-                        scaleX: newScaleFactor,
-                        scaleY: newScaleFactor
-                    });**/
-      imgObj.src = e as string;
-      initBackGroundImage(e as string, true, () => {
-        historyRef.current.updateCanvasState(ACTION.add);
-        setTimeout(()=>{
-  if(imgData){
+                    const originalScaleX = imgData.originalCanvasWidth / imageWidth;
+                    const originalScaleY = imgData.originalCanvasHeight / imageHeight;
+                    const currentScaleX = currentCanvasWidth / currentImageWidth;
+                    const currentScaleY = currentCanvasHeight / currentImageHeight;
 
- annotationsInit(imgData,canvas,historyRef);
+                    const scaleX = currentScaleX / originalScaleX;
+                    const scaleY = currentScaleY / originalScaleY;
+                    const newScaleFactor = Math.min(currentCanvasWidth / imageWidth, currentCanvasHeight / imageHeight);
+
+  
+
+ annotationsInit(imgData,canvas,historyRef,{
+    scaleX,
+    scaleY,
+ });
    }
         })
-         
-      },5000);
+
+      } else{
+
+      }
+      imgObj.src = e as string;
+      initBackGroundImage(e as string, true, () => {
+        historyRef.current.updateCanvasState(ACTION.add);
+ 
 
       return;
     }