vue-cropper 截图插件的使用

安装插件：
npm install vue-cropper --save-dev
引用：
import vueCropper from 'vue-cropper'
声明：
components: {
  vueCropper
}

<vueCropper
  ref="cropper"
  :img="option.img"     // 裁剪图片的地址	可选值：url 地址 || base64 || blob
  :outputSize="option.size"    // 裁剪生成图片的质量    可选值：0.1 - 1
  :outputType="option.outputType"    // 裁剪生成图片的格式    可选值：jpeg || png || webp
  :info="true"	    // 裁剪框的大小信息	可选值：true || false
  :canScale="true"    // 图片是否允许滚轮缩放     可选值：true || false
  :full="option.full"	// 是否输出原图比例的截图  可选值：true | false
  :canMove="option.canMove"	// 上传图片是否可以移动 可选值：true | false
  :canMoveBox="option.canMoveBox"    // 截图框能否拖动	可选值：true | false
  :fixedBox="option.fixedBox"	// 固定截图框大小 不允许改变  可选值：true | false
  :original="option.original"	// 上传图片按照原始比例渲染  可选值：true | false
  @realTime="realTime"	    // 预览
></vueCropper>

this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop 自动生成截图框函数
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度

获取截图信息
this.$refs.cropper.cropW 截图框宽度
this.$refs.cropper.cropH 截图框高度



获取截图数据
// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})

// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})



// 图片预览
realTime (data) {
  this.previews = data
}

<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
  <div :style="previews.div">
    <img :src="option.img" :style="previews.img">
  </div>
</div>

 

相关文档地址：
http://xyxiao.cn/vue-cropper/example/
https://github.com/xyxiao001/vue-cropper