vue-cropper插件使用

需求拍照之后裁剪照片，然后搜到了vue-cropper功能还是很强大的

首先是使用方式

组件内使用

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper,
},

全局使用

import VueCropper from 'vue-cropper' 
Vue.use(VueCropper)

html中

<vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :info="option.info"
          :infoTrue="option.infoTrue"
          :outputType="option.outputType"
          :centerBox="option.centerBox"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixedBox="option.fixedBox"
          :fixedNumber="option.fixedNumber"
          :canMoveBox="option.canMoveBox"
          :high="option.high"
          :enlarge="option.enlarge"
          :canMove="option.canMove"
          :canScale="option.canScale"
          @imgLoad="imgLoad" 
          @cropMoving="cropMoving"
        ></vueCropper>

上面的绑定属性基本不用说，npm上都有介绍，主要是讲一下我在开发中遇到的问题，拍完照之后插件在画图的时候会有一个时间，这个时间页面上会显示空白，这时候就需要一个loading，就用@imgLoad这个属性，这是在图片渲染出来的回调函数，在methods定义一下

imgLoad() {
      // cropper图片加载成功会触发
      this.mask = false;  //我这是弄了loading的flag，在渲染出来之后loading不显示
    },

拍完照之后要截图的代码

handleUse() {
      this.isLoading = true;
      this.$refs.cropper.startCrop(); //开始截图
      this.$refs.cropper.getCropData(res => { //得到截图的数据
        this.scanImg = res;
        let reg = new RegExp("data:image/jpeg;base64,");
        console.warn(res);
        this.clipImg = res.replace(reg, "");
        this.showImg = true;
        const data = {
          image: this.clipImg,
          coords: this.cropAxis, // 修改坐标格式[x1,y1, x2,y2]
          format: "jpeg",
          // func: "cloth",
          source: "1" // 1 洗衣机，2 护理机
        };
      }
 }

我是用了截图框可移动，后台还需要截图框的坐标，这里就用@cropMoving截图框移动后的回调函数,

// 截图框移动回调函数
    cropMoving(data) {
      // 截图框的左上角 x，y和右下角坐标x，y
      this.cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
    },