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)
},