Vue + vue-cropper裁切图片

实现: vue按比例裁剪图片

安装：npm i vue-cropper

全局引入：（main.js）

        upload
          class="avatar-uploader"
          action
          :auto-upload="false"
          :on-change="uploadFileMethodAnswer"
          :show-file-list="false"
          :multiple="true"
          :before-upload="beforeAvatarUpload"
        >
          上传banner图
           (建议分辨率800*450)
        
      

        

          

            <vueCropper
              ref="cropper"
              :img="option.img"
              :outputSize="option.size"
              :outputType="option.outputType"
              :info="true"
              :full="option.full"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :original="option.original"
              :autoCrop="option.autoCrop"
              :autoCropWidth="option.autoCropWidth"
              :autoCropHeight="option.autoCropHeight"
              :fixedBox="option.fixedBox"
              :fixed="option.fixed"
              :fixedNumber="option.fixedNumber"
            >
          
        
        

          取 消
          确认
        
      
    

option配置：(参考网站)

https://www.npmjs.com/package/vue-cropper/v/0.4.7

https://github.com/fengyuanchen/cropperjs#options

option: {
        img: "",
        outputSize: 1, //剪切后的图片质量（0.1-1）
        full: false, //输出原图比例截图 props名full
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 868,
        autoCropHeight: 488,
        fixedBox: false,
        fixed: true,
        maxImgSize: 3000, // 图片最大像素
        fixedNumber: [16, 9]
      },

提交数据（js）

finish() {
      let _this = this;
      this.$refs.cropper.getCropBlob(data => {
        let base64Data = null;
        let a = new FileReader();
        a.onload = function(e) {
          base64Data = e.target.result;
          _this.loading = true;
          const formData = new FormData();
          formData.append("imageFile", base64Data);
          uploadImg({
            formData: formData
          })
            .then(res => {
                
            })
            .catch(() => {
              // this.$message.error('图片上传失败！');
            });
        };
        a.readAsDataURL(data);
      });
    },

.cropper-content {
  .cropper {
    width: auto;
    height: 500px!important;
  }
}