Thu Feb 6 14:45:00 CST 2025 inscode

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

@@ -71,7 +71,7 @@ const useDownload = () => {
      annotations.push(annotation);
     })
      // 打印标注信息
-    console.log('用户标注信息:', annotations,canvas.backgroundImage._element.currentSrc);
+    console.log('用户标注信息:', annotations,canvas.backgroundImage, canvas.backgroundImage._element.currentSrc);
 
    let currentSrc = canvas.backgroundImage._element.currentSrc
   let currentSrcSplit = currentSrc.split('/')
@@ -108,6 +108,10 @@ const useDownload = () => {
             };
            data[deviceId+'_'+imgkey]={
             annotations:annotations,
+            imageWidth: canvas.backgroundImage.width,
+            imageHeight: canvas.backgroundImage.height,
+            originalCanvasWidth: canvas.getWidth(),
+            originalCanvasHeight: canvas.getHeight(),
             imgUrl: currentSrc,
             imgTitle: imageTitle,
            }

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

@@ -7,25 +7,35 @@ import {fabric} from 'fabric';
 import ArrowClass from '../helpers/Arrow';
 
 
-function annotationsInit(annotations,canvas,historyRef){
-           
+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.originalCanvasWidth||imgData.imgWidth;
+                let imageHeight = imgData.originalCanvasHeight||imgData.imgHeight;
+                  // 计算缩放比例
+                const scaleX = currentCanvasWidth / imageWidth;
+                const scaleY = currentCanvasHeight / imageHeight;
+                console.log("scaleX,scaleY ",scaleX,scaleY,currentCanvasWidth,currentCanvasHeight,currentImageWidth,currentImageHeight,imageWidth,imageHeight,imgData)
            // 遍历标注信息，重新创建元素并添加到画布上
-                annotations.forEach((annotation) => {
+                imgData.annotations.forEach((annotation) => {
                     let newObject;
                    
                     switch (annotation.type) {
                         case 'rect':
                             newObject = new fabric.Rect({
-                                left: annotation.left,
-                                top: annotation.top,
+                                left: annotation.left* scaleX,
+                                top: annotation.top* scaleY,
                                 originX: 'left',
                                 originY: 'top',
-                                width: annotation.width,
-                                height: annotation.height,
+                                width: annotation.width* scaleX,
+                                height: annotation.height* scaleY,
                                 angle: annotation.angle||0,
                                 fill: annotation.fill || 'rgba(255,0,0,0)',
                                 stroke: annotation.stroke,
-                                 strokeWidth: annotation.size,
+                                 strokeWidth: annotation.size* Math.max(scaleX, scaleY),
                                 transparentCorners: false,
                                   opacity: annotation.opacity || 1
                             });
@@ -34,9 +44,9 @@ function annotationsInit(annotations,canvas,historyRef){
                          case 'i-text':
                         case 'text':
                             newObject = new fabric.IText(annotation.text, {
-                                left: annotation.left,
-                                top: annotation.top,
-                                width: annotation.width,
+                                left: annotation.left* scaleX,
+                                top: annotation.top* scaleY,
+                                width: annotation.width* scaleX,
                                 fontSize: annotation.fontSize,
                                 fill: annotation.fill,
                                 id: Math.random() * 4 + '_' + Date.now(),
@@ -45,31 +55,40 @@ function annotationsInit(annotations,canvas,historyRef){
                             break;
                         case 'circle':
                             newObject = new fabric.Circle({
-                                left: annotation.left,
-                                top: annotation.top,
-                                radius: annotation.width / 2,
+                                left: annotation.left* scaleX,
+                                top: annotation.top* scaleY,
+                                radius: (annotation.width / 2)* Math.max(scaleX, scaleY),
                                 angle: annotation.angle||0,
                                 fill: annotation.fill||'',
                                 originX: 'left',
                                 originY: 'top',
                                 stroke: annotation.stroke,
-                                strokeWidth: annotation.size,
+                                strokeWidth: annotation.size* Math.max(scaleX, scaleY),
                                   opacity: annotation.opacity || 1
                             });
                             break;
                         case 'arrow' :
                          newObject = new ArrowClass(annotation.pointList||[annotation.left,annotation.top,annotation.left,annotation.top], {
-                                strokeWidth: annotation.size,
+                                strokeWidth: annotation.size* Math.max(scaleX, scaleY),
                                 stroke: annotation.stroke,
                                 id: new Date().valueOf() + '_' + Math.random() * 4,
                             });
                           newObject.strokeUniform = true;
                            break;
                        case 'path' :
-                               newObject = new fabric.Path(annotation.path, {
+                              const adjustedPath = annotation.path.map((segment) => {
+                                    if (typeof segment[1] === 'number') {
+                                        segment[1] *= scaleX;
+                                    }
+                                    if (typeof segment[2] === 'number') {
+                                        segment[2] *= scaleY;
+                                    }
+                                    return segment;
+                                });
+                               newObject = new fabric.Path(adjustedPath, {
                                 fill: annotation.fill,
                                 stroke: annotation.stroke,
-                                strokeWidth: annotation.size,
+                                strokeWidth: annotation.size* Math.max(scaleX, scaleY),
                                 opacity: annotation.opacity || 1
                             });
                            break;
@@ -107,7 +126,7 @@ export const useUpload = () => {
         setTimeout(()=>{
   if(imgData){
 
- annotationsInit(imgData.annotations,canvas,historyRef);
+ annotationsInit(imgData,canvas,historyRef);
    }
         })