一个挺好用的图像裁剪插件 vue-cropper
使用挺简单的，而且还提供demo对照查看
插件地址：https://github.com/xyxiao001/vue-cropper
首先安装插件：
- npm install vue-cropper --save
然后在使用的页面引入
- import VueCropper from "vue-cropper"
在设置component
- export default {
- components: {
- VueCropper
- },
- }
template中插入（外面需要套一个div，用于设置插件显示的大小）
- <vueCropper
- ref="cropper"
- :img="option.img"
- :outputSize="option.size"
- :outputType="option.outputType"
- ></vueCropper>
- data(){
- return{
- option:{
- img: 'imgUrl', // img的URL或者base64
- size: 1,
- outputType: 'png',
- }
- }
- }
其他的看官方文档
内置方法 通过this.$refs.cropper 调用
this.$refs.cropper.startCrop() 开始截图 （如果没有设置截图框的话，通过这个启动截图框）
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.getCropData() 获取截图信息 （得到截图的URL或者base64）
- // 获取截图的base64 数据
- this.$refs.cropper.getCropData((data) => {
- // do something
- console.log(data)
- })
- // 获取截图的blob数据
- this.$refs.cropper.getCropBlob((data) => {
- // do something
- console.log(data)
- })
