vue-cropper

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, // 裁剪生成图片的质量
          outputType: 'png', // 裁剪生成图片的格式 jpeg, png, webp
          info: true, // 裁剪框的大小信息
          canScale: true, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 500, // 默认生成截图框宽度
          autoCropHeight: 500, // 默认生成截图框高度
          fixedBox: false, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [1.5, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
          canMove: true, // 上传图片是否可以移动
          canMoveBox: true, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: true, // 截图框是否被限制在图片里面
          infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          full: true, // 是否输出原图比例的截图
          enlarge: '1', // 图片根据截图框输出比例倍数
          mode: 'contain' // 图片默认渲染方式 contain , cover, 100px, 100% auto
        },
  }
}

4、获取裁剪好的图片

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