vue-cropperjs 图片裁剪上传功能使用方法记录

引入：

官网：https://www.npmjs.com/package/vue-cropperjs

控制台输入：

npm install --save vue-cropperjs

vue 项目中引入：

import Cropper from 'cropperjs'

let projectEditVue = new Vue({
  el: '#detailEdit',
  delimiters: ['{[', ']}'],
  components: {
    Cropper,
  },
  data () {
    return {}
  }
})

Vue.use({
  projectEditVue,
})

初始化裁剪框：

html：

js：

mounted () {
    // 初始化裁剪框
    var image = document.getElementById('image')
    this.cropper = new Cropper(image, {
      guides: false, // 是否在剪裁框上显示虚线
      aspectRatio: 420 / 213, // 设置剪裁容器的比例
      minContainerHeight: 319.5,
      minContainerWidth: 630,
      dragMode: 'move', // 移动 canvas
      zoomOnWheel: true, // 是否允许通过鼠标滚轮来缩放图片
      background: true, // 是否在容器上显示网格背景
      rotatable: true, // 是否允许旋转图片
      ready () {
        this.cropper.crop()
      },
    })
},　　

上传图片：

    confirm () {
      let vm = this
      vm.cropper.getCroppedCanvas({
        width: 420,
        height: 213,
        fillColor: '#fff',
        imageSmoothingEnabled: false,
        imageSmoothingQuality: 'high',
      }).toBlob(function (blob) {
        let croppedImage = new File([blob], vm.logoName, { lastModified: Date.now() })
        api.media.uploadImageTo('project_logo')({
          file: croppedImage,
        }).then((response) => {
          if (response.status === 200) {
            let res = response.data.data[0]
            vm.cropper.replace(res.download_url)
          }
        })
      })
    },

　　

下面说下放大缩小左右旋转的裁剪工具：

　　根据 html 那张图可见，给四个工具图片绑定四个事件，分别是：zoomIn  zoomOut  rotateLeft  rotateRight, 对应的方法写法为：

zoomIn () {
  this.cropper.zoom(-0.1)
},
zoomOut () {
  this.cropper.zoom(0.1)
},
rotateLeft () {
  this.cropper.rotate(-90)
},
rotateRight () {
  this.cropper.rotate(90)
},