Vue图片上传裁剪插件 vue-cropper

一个挺好用的图像裁剪插件 vue-cropper

使用挺简单的，而且还提供demo对照查看

插件地址：https://github.com/xyxiao001/vue-cropper

首先安装插件：

1. npm install vue-cropper --save

然后在使用的页面引入

1. import VueCropper from "vue-cropper"

在设置component

1. export default {
2.   components: {
3.     VueCropper
4.   },
5. }

template中插入（外面需要套一个div，用于设置插件显示的大小）

1. <vueCropper
2.   ref="cropper"
3.   :img="option.img"
4.   :outputSize="option.size"
5.   :outputType="option.outputType"
6. ></vueCropper>

1. data(){
2.   return{
3.      option:{
4.         img: 'imgUrl', // img的URL或者base64
5.         size: 1,
6.         outputType: 'png',
7.      }
8.   }
9. }

其他的看官方文档

内置方法 通过this.$refs.cropper 调用

this.$refs.cropper.startCrop() 开始截图 （如果没有设置截图框的话，通过这个启动截图框）

this.$refs.cropper.stopCrop() 停止截图

this.$refs.cropper.clearCrop() 清除截图

this.$refs.cropper.getCropData() 获取截图信息 （得到截图的URL或者base64）

1. // 获取截图的base64 数据
2. this.$refs.cropper.getCropData((data) => {
3.   // do something
4.   console.log(data)
5. })
6.
7. // 获取截图的blob数据
8. this.$refs.cropper.getCropBlob((data) => {
9.   // do something
10.   console.log(data)
11. })