chore: 裁剪细节调整

ikuaitu · Nov 14, 2024 · 721605c · 721605c
1 parent 69a9400
commit 721605c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/src/components/cropperDialog.vue b/src/components/cropperDialog.vue
@@ -101,6 +101,7 @@
           :fixedNumber="fixedRatio"
           centerBox
           :fixedBox="false"
+          full
           @realTime="onPreview"
         />
       </div>
@@ -189,12 +190,12 @@ function changeRatio(ratio?: [number, number]) {
     fixed.value = true;
     fixedRatio.value = ratio;
     // 宽度不变，按照比例修改高度
-    cropperHeight.value = (cropperWidth.value * ratio[1]) / ratio[0];
+    // cropperHeight.value = (cropperWidth.value * ratio[1]) / ratio[0];
   } else {
     fixed.value = false;
   }
   nextTick(() => {
-    cropperRef.value.goAutoCrop(cropperWidth.value, cropperHeight.value);
+    cropperRef.value.goAutoCrop(9999, 9999);
   });
 }
 

diff --git a/src/components/cropperImg.vue b/src/components/cropperImg.vue
@@ -24,23 +24,22 @@ const cropper = () => {
   const activeObject = canvasEditor.canvas.getActiveObjects()[0];
   if (activeObject && activeObject.type === 'image') {
     console.log('🚀 ~ cropper ~ activeObject:', activeObject);
-    cropperDialogRef.value.open(
-      { img: activeObject.src || activeObject._element.src },
-      async (data) => {
-        console.log('🚀 ~ cropper ~ data:', data);
-        const imgEl = await insertImgFile(data);
-        const width = activeObject.get('width');
-        const height = activeObject.get('height');
-        const scaleX = activeObject.get('scaleX');
-        const scaleY = activeObject.get('scaleY');
-        activeObject.setSrc(imgEl.src, () => {
-          activeObject.set('scaleX', (width * scaleX) / imgEl.width);
-          activeObject.set('scaleY', (height * scaleY) / imgEl.height);
-          canvasEditor.canvas.renderAll();
-        });
-        imgEl.remove();
-      }
-    );
+    cropperDialogRef.value.open({ img: activeObject._element.src }, async (data) => {
+      console.log('🚀 ~ cropper ~ data:', data);
+      const imgEl = await insertImgFile(data);
+      // const width = activeObject.get('width');
+      // const height = activeObject.get('height');
+      // const scaleX = activeObject.get('scaleX');
+      // const scaleY = activeObject.get('scaleY');
+      // console.log('🚀 ~ cropper ~ scaleX:', scaleX);
+      // console.log('🚀 ~ cropper ~ scaleY:', scaleY);
+      activeObject.setSrc(imgEl.src, () => {
+        // activeObject.set('scaleX', scaleX);
+        // activeObject.set('scaleY', scaleY);
+        canvasEditor.canvas.renderAll();
+      });
+      imgEl.remove();
+    });
   }
 };