Merge branch 'dev-circle-live-20200715' into 'release'

裁剪优化，code review:bo.dang



See merge request !200

src/components/common/cropper.vue

@@ -12,7 +12,9 @@
   </div>
 </template>
 <script>
-  import Cropper from 'cropperjs'
+  let vm = null;
+  // import Cropper from 'cropperjs'
+  import Cropper from "../../utils/cropperjs/cropper";
   import 'cropperjs/dist/cropper.min.css'
   export default {
     name: 'rc-cropper2',
@@ -26,6 +28,9 @@
         required: true
       },
     },
+    created() {
+     vm = this;
+    },
     data () {
       return {
         cropper: null,
@@ -53,7 +58,7 @@
             //   int_x = 800/_this.cropOption.cvWidth;
             // }
             //
-            // let int_y = _this.cropOption.cvHeight/800;
+            // let int_y = _this.cropOption.cvHeight/540;
             // if(int_y >= 1){
             //   int_y = 540/_this.cropOption.cvHeight;
             // }
@@ -124,9 +129,9 @@
             highlight: true,
             cropBoxMovable: true,
             zoomable: true,
-            cropBoxResizable: this.cropOption.cropBoxResizable,//是否显示等比例缩放
-            minCropBoxWidth: this.cropOption.minCropBoxWidth,// 剪切区域的最小宽度
-            minCropBoxHeight: this.cropOption.minCropBoxHeight, // 剪切区域的最小高度
+            cropBoxResizable: vm.cropOption.cropBoxResizable,//是否显示等比例缩放
+            minCropBoxWidth: vm.cropOption.minCropBoxWidth,// 剪切区域的最小宽度
+            minCropBoxHeight: vm.cropOption.minCropBoxHeight, // 剪切区域的最小高度
             // minContainerHeight: 500,
             // minCanvasHeight: 500,
             restore: true,
@@ -135,10 +140,10 @@
             aspectRatio: this.cropOption.aspectRatio,// 显示等比例缩放的比例
             ready: () => {
               this.cropper.setData({
-                x: this.cropOption.offset_x,
-                y: this.cropOption.offset_y,
-                width: this.cropOption.width,
-                height: this.cropOption.height
+                x: vm.cropOption.offset_x,
+                y: vm.cropOption.offset_y,
+                width: vm.cropOption.width,
+                height: vm.cropOption.height
               })
               // this.cropper.setCropBoxData({
               //   width: 750,
@@ -149,6 +154,7 @@
 
               const imageData = this.cropper.getImageData();
               const canvasData = this.cropper.getCanvasData();
+              const cropBoxData = this.cropper.getCropBoxData();
               console.log("imageData width:" + imageData.width);
               console.log("imageData height:" + imageData.height);
               console.log("imageData naturalWidth:" + imageData.naturalWidth);
@@ -157,6 +163,8 @@
               console.log("canvasData naturalHeight:" + canvasData.naturalHeight);
               console.log("canvasData width:" + canvasData.width);
               console.log("canvasData height:" + canvasData.height);
+              console.log("cropBoxData width:" + cropBoxData.width);
+              console.log("cropBoxData height:" + cropBoxData.height);
 
               // this.cropper.zoomTo(-0.2);
               const containerData = this.cropper.getContainerData();