简化的微信小程序剪切头像we-cropper框架案例
废话不多说，先上图~
目录结构是不是超简单？下面我们来分析一波怎么做。
1.首先将we-cropper框架包添加到自己的小程序项目中，这里我的we-cropper是经过删减的，因为只用到了两个文件；
2.新建cropper和upload这两个page；
cropper页面：
upload页面：
3.点击cropper页面中的圆形头像，可选择图片，跳转到upload页面进行剪切。
4.点击确定之后就看到第一张图所示的效果了。
相关代码贴一贴吧：
cropper.wxml
<view class="container flex">
<view>
<image src="{
{src}}" class="avatar" bindtap="upload"></image>
<view class="item flex" bindtap="upload">点我头像</view>
</view>
</view>
cropper.js
upload.wxml
<view class="cropper-wrapper">
<template is="weCropper" data="{
{...cropperOpt}}" />
<view class="cropper-buttons">
<view class="upload" bindtap="uploadTap">
重新选择
</view>
<view class="getCropperImage" bindtap="getCropperImage">
确定
</view>
</view>
</view>
upload.js
完整demo可直接下载~
项目地址：
补充：we-cropper框架存在适配问题，目前已解决，请查看我的另一篇文章：https://blog..net/java558/article/details/81111666
上一篇：
uniapp开发微信小程序-2.页面制作
下一篇：
微信小程序的详细登录(上)