vue-cropper移动端H5用户头像剪裁并上传原创

使用vue-cropper组件完成头像修剪

注：以下代码均属于同一页面

一.安装vue-cropper组件：

npm install vue-cropper --save-dev

二.在组件内使用

三.如何使用该页面？
（1）我用的vant组件库，首先定义一个上传组件
1.1 生成dom元素

1.2 Upload按钮对应的方法：

（2）完成了1下一步是把照片剪下来。
2.1 生成dom元素(我通过单击Upload按钮显示屏幕截图的遮罩层)

2.2 vue-cropper配置：

2.3 vue-cropper实现截图

四.示例：(点击更改头像后，我去选择文件，没有进行此录制。)

VUE-CROPPER API: https://github.com/xyxiao001/vue-cropper