1、安裝

npm install vue-cropper --save

2、引入

import cropperModel from '@/components/cropper/index'
components: {
  cropperModel
},

3、使用

<vue-cropper
      class="crop-box"
       ref="cropper"
        :img="options.img"
        :autoCrop="options.autoCrop"
        :fixedBox="options.fixedBox"
        :canMoveBox="options.canMoveBox"
        :autoCropWidth="options.autoCropWidth"
        :autoCropHeight="options.autoCropHeight"
        :centerBox="options.centerBox"
        :fixed="options.fixed"
        :fixedNumber="options.fixedNumber"
        :canMove="options.canMove"
        :canScale="options.canScale"
        :mode="options.mode"
 >
</vue-cropper>
data() {
  return {
    options: {
          img: this.imgSrc, // 原圖文件
          outputSize: 1, // 裁剪生成圖片的質(zhì)量
          outputType: 'png', // 裁剪生成圖片的格式 jpeg, png, webp
          info: true, // 裁剪框的大小信息
          canScale: true, // 圖片是否允許滾輪縮放
          autoCrop: true, // 是否默認(rèn)生成截圖框
          autoCropWidth: 500, // 默認(rèn)生成截圖框?qū)挾?          autoCropHeight: 500, // 默認(rèn)生成截圖框高度
          fixedBox: false, // 固定截圖框大小 不允許改變
          fixed: true, // 是否開啟截圖框?qū)捀吖潭ū壤?          fixedNumber: [1.5, 1], // 截圖框的寬高比例 [ 寬度 , 高度 ]
          canMove: true, // 上傳圖片是否可以移動(dòng)
          canMoveBox: true, // 截圖框能否拖動(dòng)
          original: false, // 上傳圖片按照原始比例渲染
          centerBox: true, // 截圖框是否被限制在圖片里面
          infoTrue: true, // true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀?          full: true, // 是否輸出原圖比例的截圖
          enlarge: '1', // 圖片根據(jù)截圖框輸出比例倍數(shù)
          mode: 'contain' // 圖片默認(rèn)渲染方式 contain , cover, 100px, 100% auto
        },
  }
}

4、獲取裁剪好的圖片

this.$refs.cropper.getCropData(data => {
  console.log(data) //base64格式
})