简化的微信小程序剪切头像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

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

<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

import weCropper from '../../we-cropper/dist/weCropper.js'

const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

Page({
  data: {
    cropperOpt: {
      id: 'cropper',
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300
      }
    }
  },

  touchStart(e) {
    this.wecropper.touchStart(e)
  },

  touchMove(e) {
    this.wecropper.touchMove(e)
  },

  touchEnd(e) {
    this.wecropper.touchEnd(e)
  },

  getCropperImage() {
    this.wecropper.getCropperImage((avatar) => {
      if (avatar) {
        // 获取到裁剪后的图片
        wx.redirectTo({
          url: '../cropper/cropper?avatar=' + avatar
        })
      } else {
        console.log('获取图片失败，请稍后重试')
      }
    })
  },

  uploadTap() {
    const self = this

    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        let src = res.tempFilePaths[0]
        // 获取裁剪图片资源后，给data添加src属性及其值
        self.wecropper.pushOrign(src)
      }
    })
  },

  onLoad(option) {
    // do something
    const {
      cropperOpt
    } = this.data
    const {
      src
    } = option

    if (src) {
      Object.assign(cropperOpt, {
        src
      })

      new weCropper(cropperOpt)
        .on('ready', function(ctx) {})
        .on('beforeImageLoad', (ctx) => {
          wx.showToast({
            title: '上传中',
            icon: 'loading',
            duration: 3000
          })
        })
        .on('imageLoad', (ctx) => {
          wx.hideToast()
        })
    }
  }
})

完整demo可直接下载~

项目地址：https://download.csdn.net/download/java558/10544752

有问题在评论区留言

补充：we-cropper框架存在适配问题，目前已解决，请查看我的另一篇文章：https://blog.csdn.net/java558/article/details/81111666