Merge pull request #796 from LAQKing/laqKing

feat: 解决centerBox=true时,截图框与图片边沿重叠时，图片无法缩放至截图框大小的问题。
xyxiao001 · Apr 18, 2024 · 438020d · 438020d
2 parents 6578e03 + 9e03a55
commit 438020d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/next/lib/vue-cropper.vue b/next/lib/vue-cropper.vue
@@ -178,7 +178,9 @@ export default defineComponent({
       scalingSet: "",
       coeStatus: "",
       // 控制emit触发频率
-      isCanShow: true
+      isCanShow: true,
+      // 图片是否等于截图大小
+      imgIsQqualCrop: false
     };
   },
   props: {
@@ -547,6 +549,7 @@ export default defineComponent({
       this.loading = true;
       this.scale = 1;
       this.rotate = 0;
+      this.imgIsQqualCrop = false;
       this.clearCrop();
       let img = new Image();
       img.onload = () => {
@@ -864,7 +867,7 @@ export default defineComponent({
       }
       this.scale = scale;
     },
-
+    
     // 修改图片大小函数
     changeScale(num) {
       let scale = this.scale;
@@ -1842,6 +1845,7 @@ export default defineComponent({
       this.h = 0;
       this.trueWidth = 0;
       this.trueHeight = 0;
+      this.imgIsQqualCrop = false;
       this.clearCrop();
       this.$nextTick(() => {
         this.checkedImg();
@@ -1892,8 +1896,45 @@ export default defineComponent({
         if (axis.y2 <= cropAxis.y2) {
           canGo = false;
         }
+        if (!canGo) {
+          this.changeImgScale(axis, cropAxis, scale);
+        }
       }
       return canGo;
+    },
+    // 缩放图片，将图片坐标适配截图框坐标
+    changeImgScale(axis, cropAxis, scale) {
+      const cropScale = this.cropW > this.cropH ? this.cropW / this.trueWidth :  this.cropH / this.trueWidth;
+      let imgW = this.trueWidth * scale;
+      let imgH = this.trueHeight * scale;
+      if (imgW >= this.cropW && imgH >= this.cropH) {
+        this.scale = scale;
+      } else {
+        this.scale = cropScale;
+        imgW = this.trueWidth * cropScale;
+        imgH = this.trueHeight * cropScale;
+      }
+      if (!this.imgIsQqualCrop) {
+        // 左边的横坐标 图片不能超过截图框
+        if (axis.x1 >= cropAxis.x1) {
+          this.x = cropAxis.x1 - (this.trueWidth - imgW) / 2;
+        }
+        // 右边横坐标
+        if (axis.x2 <= cropAxis.x2) {
+          this.x = cropAxis.x2 - (this.trueWidth - imgW) / 2 - imgW;
+        }
+        // 纵坐标上面
+        if (axis.y1 >= cropAxis.y1) {
+          this.y = cropAxis.y1 - (this.trueHeight - imgH) / 2;
+        }
+        // 纵坐标下面
+        if (axis.y2 <= cropAxis.y2) {
+          this.y = cropAxis.y2 - (this.trueHeight - imgH)/2 - imgH;
+        }
+      }
+      if (imgW < this.cropW || imgH < this.cropH) {
+        this.imgIsQqualCrop = true;
+      }
     }
   },
   mounted() {

diff --git a/next/src/App.vue b/next/src/App.vue
@@ -253,6 +253,7 @@ export default {
         img: "",
         size: 1,
         full: false,
+        infoTrue: true,
         outputType: "png",
         canMove: true,
         fixedBox: false,
@@ -262,7 +263,7 @@ export default {
         // 只有自动截图开启 宽度高度才生效
         autoCropWidth: 200,
         autoCropHeight: 150,
-        centerBox: false,
+        centerBox: true,
         high: false,
         cropData: {},
 				enlarge: 1,