vue+cropper图片裁剪

效果如上：

安装：npm install vue-cropper -S

main.js里面使用

import VueCropper from 'vue-cropper' 
Vue.use(VueCropper)

组件内使用

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}

需要使用外层容器包裹并设置宽高(class="cropper"需设置高度)

<div class="cropper-wrap">
      <div class="cropper-content">
        <div class="cropper-preview">
          <p>预览</p>
          <div>
            <img class="preview-image" :src="prewImg">
          </div>
        </div>
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :output-size="option.size"
            :output-type="option.outputType"
            :info="true"
            :can-scale="option.canScale"
            :auto-crop="option.autoCrop"
            :auto-crop-width="option.autoCropWidth"
            :auto-crop-height="option.autoCropHeight"
            :fixed-box="option.fixedBox"
            :fixed="option.fixed"
            :fixed-number="option.fixedNumber"
            :can-move="option.canMove"
            :can-move-box="option.canMoveBox"
            :original="option.original"
            :center-box="option.centerBox"
            :infotrue="option.infoTrue"
            :full="option.full"
            :enlarge="option.enlarge"
            :mode="option.mode"
            @realTime="realTime"
          />
        </div>
      </div>
      <div class="cropper-footer">
        <el-button class="cropper-btn" @click="handleCropper">裁剪</el-button>
        <el-button class="cropper-cancel" @click="cancel">取消</el-button>
      </div>
    </div>

    data(){ 
      prewImg: '', // 预览图片
      option: {
        img: '', // 裁剪图片的地址,一般是上传后的图片地址
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 252, // 默认生成截图框宽度
        autoCropHeight: 142, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [16, 9], // 截图框的宽高比例
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: false, // 是否输出原图比例的截图
        enlarge: 0.8, // 图片根据截图框输出比例倍数
        mode: 'cover' // 图片默认渲染方式
      }
    }

// 实时预览
realTime(data) {
      this.$refs.cropper.getCropData((data) => {
        this.prewImg = data
      })
    },
// 获取截图的base64数据
 handleCropper() {
    this.$refs.cropper.getCropData((data) => {
     console.log(data)
     // TODO
    })
  }

更多配置项和方法可查看GitHub地址：github.com/xyxiao001/v…

在线例子：github.xyxiao.cn/vue-cropper…