史上最全基于vue的图片裁剪vue-cropper使用

原文地址：https://blog.csdn.net/qq_41107231/article/details/109725839

基于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：