vue的图片裁剪vue-cropper使用

基于vue的图片裁剪vue-cropper

需求:

 

vue-cropper官网

链接：https://github.com/xyxiao001/vue-cropper

安装：npm install vue-cropper 或者 yarn add vue-cropper

代码拷贝

废话不多说，代码也不多敲，相信大家和我一样，能粘贴绝不手敲，哈哈。

组件封装CropperImage.vue

 

注意：裁剪组件的基础配置option，小编这里配置了官方所给的所有基础配置，大家可以按需配置。

新建Tailoring.vue 调用封装好的组件:

这里我们先简单说一下思路，通过按钮触发事件打开我们的剪裁窗口，选择图片，点击上传之后，将地址回调回来，拿到地址就可以处理我们的业务了，比如随着表单一起将回调地址存入数据库等等。

 

 Tailoring.vue：