diff --git a/src/tiny-image-editor/src/components/Upload.tsx b/src/tiny-image-editor/src/components/Upload.tsx index 71e3c14b07dee1b9490d6ff8cbcac8394640744b..32022d1c055830e17ae21592e6169343af7d758f 100644 --- a/src/tiny-image-editor/src/components/Upload.tsx +++ b/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; }