vue项目在移动端使用cropperjs点击头像（支持裁剪旋转）更换用户头像

需求：点击用户页面的头像上传或拍照更换头像。上传图片后要求可裁剪移动旋转。

分析：经过大量的调研，我选择了 cropperjs 去实现这一功能，所以将本次解决过程和思路做一回顾。

首先，在项目中引入 cropperjs -------- npm install cropperjs --save

其次我在全局创建了一个组件名为：cropper.vue

 

此处是cropper.vue 组件内容，

使用

取消

这个div是一个蒙层效果，此处 img绑定的是我们上传的图片路径。此处container绑定的:style="{height: Global.HEIGHT(114) + 'px'}" 是我自己设置的一个全局计算移动端屏幕高度一个方法，大家可以改一下。

{{name.substr(name.length-2)}}

div类名为avatar，这块我绑定了一个imageShow，这块关键是我们的需求是如果用户没有上传图片变默认用他的昵称最后两位做他的头像，昵称从接口获取。所以这块{{name.substr(name.length-2)}}大家可以根据自己的要求改。

在头像页面我们只需要调用此组件便可：我的父组件为 my.vue: