裁剪优化和背景图

src/components/common/cropper.vue

@@ -5,7 +5,7 @@
       <canvas :id="originImg" ref="canvas"/>
       <div class="rc-cropper__iconCrop">
         <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
-          <el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
+          <el-button type="primary" size="mini" @click="sureCropper()" style="margin-top:530px;margin-right: 320px;"><i class="el-icon-check">确认裁剪</i></el-button>
         </el-tooltip>
       </div>
     </div>
@@ -47,6 +47,27 @@
           if (canvas) {
             // canvas.width = 1000
             // canvas.height = 800
+            //
+            // let int_x = _this.cropOption.cvWidth/800;
+            // if(int_x >= 1){
+            //   int_x = 800/_this.cropOption.cvWidth;
+            // }
+            //
+            // let int_y = _this.cropOption.cvHeight/800;
+            // if(int_y >= 1){
+            //   int_y = 540/_this.cropOption.cvHeight;
+            // }
+            //
+            //
+            // if(int_x >= int_y){
+            //   canvas.width = _this.cropOption.cvWidth * int_y;
+            //   canvas.height = _this.cropOption.cvHeight * int_y;
+            // }
+            // else {
+            //   canvas.width = _this.cropOption.cvWidth * int_x;
+            //   canvas.height = _this.cropOption.cvHeight * int_x;
+            // }
+
             canvas.width = _this.cropOption.cvWidth;
             canvas.height = _this.cropOption.cvHeight;
             let ctx = canvas.getContext('2d')
@@ -55,6 +76,12 @@
             img.crossOrigin = 'Anonymous'
             img.src = this.originImg
             img.onload = function () {
+              // ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, 130, 600)
+              // ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 130, 600)
+              console.log("drawImage: canvas width:" + canvas.width + ",height:" + canvas.height);
+              console.log("drawImage: img width:" + img.width + ",height:" + img.height);
+              // ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+              // ctx.drawImage(img, 230, 230, canvas.width * 0.15, canvas.height * 0.35)
               ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
               _this.initCropper()
             }
@@ -100,8 +127,9 @@
             cropBoxResizable: this.cropOption.cropBoxResizable,//是否显示等比例缩放
             minCropBoxWidth: this.cropOption.minCropBoxWidth,// 剪切区域的最小宽度
             minCropBoxHeight: this.cropOption.minCropBoxHeight, // 剪切区域的最小高度
-            // minContainerHeight: 3000,
-            // minCanvasHeight: 3000,
+            // minContainerHeight: 500,
+            // minCanvasHeight: 500,
+            restore: true,
             toggleDragModeOnDblclick: false,
             // aspectRatio: 75/42,
             aspectRatio: this.cropOption.aspectRatio,// 显示等比例缩放的比例
@@ -117,6 +145,31 @@
               //   height: 100
               // })
               // this.cropper.move(1, -1).rotate(0).scale(1, -1);
+              // this.cropper.zoom(-2);
+
+              const imageData = this.cropper.getImageData();
+              const canvasData = this.cropper.getCanvasData();
+              console.log("imageData width:" + imageData.width);
+              console.log("imageData height:" + imageData.height);
+              console.log("imageData naturalWidth:" + imageData.naturalWidth);
+              console.log("imageData naturalHeight:" + imageData.naturalHeight);
+              console.log("canvasData naturalWidth:" + canvasData.naturalWidth);
+              console.log("canvasData naturalHeight:" + canvasData.naturalHeight);
+              console.log("canvasData width:" + canvasData.width);
+              console.log("canvasData height:" + canvasData.height);
+
+              // this.cropper.zoomTo(-0.2);
+              const containerData = this.cropper.getContainerData();
+
+              console.log("containerData width:" + containerData.width);
+              console.log("containerData height:" + containerData.height);
+
+// Zoom to 50% from the center of the container.
+//               this.cropper.zoomTo(-0.5, {
+//                 x: containerData.width / 2,
+//                 y: containerData.height / 2,
+//               });
+
             },
             cropstart:(event) => {
               console.log(event.detail.originalEvent);
@@ -140,7 +193,8 @@
             //     event.preventDefault();
             //   }
             // },
-          })
+          });
+
 
       },
       // 确认裁剪

src/views/yqrange/create-live.vue

@@ -205,7 +205,7 @@
                   <div style="margin-left:0px;margin-top: 10px;min-width: 380px;display: flex;align-items: center">
                       <img :src="backgroundImageUrl"
                         style="float: left;width: 150px;height: 100px;"/>
-                    <el-button size="danger" style="margin-left: 20px;" @click="delBackgroundImage(index, item)">删除</el-button>
+                    <el-button size="danger" style="margin-left: 20px;" @click="delBackgroundImage(index, item)" :disabled="formData.liveStatus == 4 || formData.liveStatus == 5">删除</el-button>
 
                   </div>
                 </el-col>
@@ -421,6 +421,7 @@
     <el-dialog
       class="dialog-title-border-old"
       title="图片裁剪"
+      style="overflow:scroll;"
       :visible.sync="showCropper"
       :width="currentOption.cropDialogWidth"
       center>
@@ -798,11 +799,11 @@
       //上传直播简介
       beforeUploadPic1(file) {
         vm.cropperIndex = 10;
-        this.currentOption.aspectRatio = 0;
-        this.currentOption.cropBoxResizable = true;
-        this.currentOption.minCropBoxWidth = 750;
-        this.currentOption.minCropBoxHeight = 120;
-        this.currentOption.width = 750;
+        // this.currentOption.aspectRatio = 0;
+        // this.currentOption.cropBoxResizable = true;
+        // this.currentOption.minCropBoxWidth = 750;
+        // this.currentOption.minCropBoxHeight = 120;
+        // this.currentOption.width = 750;
         let fileLimit = {
           width: 750,
           height: 3000,
@@ -968,14 +969,16 @@
 
             // 图片大小不正常，则进行裁剪
             // 直播简介，简介要求750*（高度<3000）
-            if(vm.cropperIndex == 10 && _this.width < fileLimit.width) {
+            if(vm.cropperIndex == 10 && (_this.width < fileLimit.width || _this.height > fileLimit.height)) {
               vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
               return
             }
-            else if(vm.cropperIndex == 10 && (_this.width > fileLimit.width || _this.height > fileLimit.height)){
-              vm.showCropper = true;
-              return;
-            }
+            // else if(vm.cropperIndex == 10 && (_this.width > fileLimit.width || _this.height > fileLimit.height)){
+            //   vm.showCropper = true;
+            //   vm.currentOption.cvWidth = _this.width;
+            //   vm.currentOption.cvHeight = _this.height;
+            //   return;
+            // }
             if(vm.cropperIndex != 10 && (_this.width < fileLimit.width || _this.height < fileLimit.height)) {
               vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
               return;
@@ -983,6 +986,8 @@
             // 图片大小不正常，则进行裁剪
             else if(vm.cropperIndex != 10 && (_this.width > fileLimit.width || _this.height > fileLimit.height)) {
               vm.showCropper = true;
+              vm.currentOption.cvWidth = _this.width;
+              vm.currentOption.cvHeight = _this.height;
               return;
             }
             // 图片大小正常，则直接上传
@@ -1287,6 +1292,7 @@
       // 删除背景图
       delBackgroundImage(){
         this.formData.backgroundImageId = "";
+        this.backgroundImageUrl = "";
       },
 
       //删除图片