fix(FaImageUpload): the output image does not conform to the crop box…

… when the aspect ratio of crop box does not match the implied aspect ratio by input width and height
cloydlau · Dec 22, 2023 · d2b2874 · d2b2874
1 parent 0e502ef
commit d2b2874
Showing 1 changed file with 40 additions and 3 deletions.
diff --git a/src/components/ImageUpload/ImageEditor.vue b/src/components/ImageUpload/ImageEditor.vue
@@ -144,7 +144,7 @@ export default {
         this.initSetting()
 
         // 大图会卡，加一个节流
-        this.updateCropBox = throttle((arg) => {
+        this.rotateCropBox = throttle((arg) => {
           // 可能编辑器已关闭
           if (this.cropper) {
             this.cropper.rotateTo(arg)
@@ -155,6 +155,23 @@ export default {
           trailing: true,
         })
 
+        this.onCropmove = throttle((e) => {
+          // 可能编辑器已关闭
+          // 拖动裁剪框不执行
+          if (this.cropper && !this.isAspectRatioLocked && e.detail.action !== 'all' && this.impliedAspectRatio) {
+            const { width, height } = this.cropper.getCropBoxData()
+            const newAspectRatio = width / height
+            if (newAspectRatio > this.impliedAspectRatio) {
+              this.inputHeight = Number.parseInt((this.inputWidth / newAspectRatio).toFixed(0))
+            } else if (newAspectRatio < this.impliedAspectRatio) {
+              this.inputWidth = Number.parseInt((this.inputHeight * newAspectRatio).toFixed(0))
+            }
+          }
+        }, this.Debounce, {
+          leading: false,
+          trailing: true,
+        })
+
         this.originalSizeLabel = sizeToLabel(this.binary.size)
 
         this.cropper.replace(this.localURL) // replace 后触发 initCropBox（参数为 Base64 类型才会触发）
@@ -240,6 +257,25 @@ export default {
         this.loading = false
       }
     },
+    // 针对没有锁定比例的情况
+    updateCropBox() {
+      if (this.impliedAspectRatio) {
+        const { width, height, left, top } = this.cropper.getCanvasData()
+        // 高图
+        if (this.impliedAspectRatio > width / height) {
+          this.cropper.setCropBoxData({ width, left })
+          const { height: containerHeight } = this.cropper.getContainerData()
+          const cropBoxHeight = width / this.impliedAspectRatio
+          this.cropper.setCropBoxData({ height: cropBoxHeight, top: (containerHeight - cropBoxHeight) / 2 })
+        // 扁图
+        } else {
+          this.cropper.setCropBoxData({ height, top })
+          const { width: containerWidth } = this.cropper.getContainerData()
+          const cropBoxWidth = height * this.impliedAspectRatio
+          this.cropper.setCropBoxData({ width: cropBoxWidth, left: (containerWidth - cropBoxWidth) / 2 })
+        }
+      }
+    },
     onWidthChange() {
       if (this.isAspectRatioSpecified && this.impliedAspectRatio !== this.specifiedAspectRatio) {
         this.inputHeight = (this.inputWidth ?? 0) / this.specifiedAspectRatio
@@ -262,7 +298,7 @@ export default {
     },
     onIsAspectRatioSpecifiedChange() {
       this.cropper.setAspectRatio(this.isAspectRatioLocked ? this.impliedAspectRatio : null)
-      this.initCropBox()
+      this.updateCropBox()
     },
     onFullscreenChange(v) {
       this.fullscreen = v
@@ -271,7 +307,7 @@ export default {
       })
     },
     onRotateDegreeChange(n) {
-      this.updateCropBox(n)
+      this.rotateCropBox(n)
     },
     getSizeDiffText(before, after) {
       const diff = after - before
@@ -552,6 +588,7 @@ export default {
         ref="cropper"
         :src="localURL"
         style="display: block; max-width: 100%"
+        @cropmove="onCropmove"
       >
     </div>