vue中怎么使用vue-cropper裁剪图片

这篇文章主要讲解了"vue中怎么使用vue-cropper裁剪图片"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"vue中怎么使用vue-cropper裁剪图片"吧！

一、安装：

npm install vue-cropper

或者

yarn add vue-cropper

二、使用：

import VueCropper from 'vue-cropper'

设置component：

export default {  components: {    VueCropper  }}

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

    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)    })

四、使用：

效果：

感谢各位的阅读，以上就是"vue中怎么使用vue-cropper裁剪图片"的内容了，经过本文的学习后，相信大家对vue中怎么使用vue-cropper裁剪图片这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！