简化的微信小程序剪切头像we-cropper框架案例

废话不多说，先上图~

目录结构是不是超简单？下面我们来分析一波怎么做。

1.首先将we-cropper框架包添加到自己的小程序项目中，这里我的we-cropper是经过删减的，因为只用到了两个文件；

2.新建cropper和upload这两个page；

cropper页面：

upload页面：

3.点击cropper页面中的圆形头像，可选择图片，跳转到upload页面进行剪切。

4.点击确定之后就看到第一张图所示的效果了。

相关代码贴一贴吧：

cropper.wxml

    
        
        点我头像
    

cropper.js

Page({
  data: {
    src: ''
  },

  upload() {
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        const src = res.tempFilePaths[0]

        wx.redirectTo({
          url: '../upload/upload?src=' + src
        })
      }
    })
  },

  onLoad(option) {
    let {
      avatar
    } = option

    if (avatar) {
      this.setData({
        src: avatar
      })
    }
  }
})

upload.wxml