小程序中上传头像裁剪

1. 在pages/upload/index.wxml

<import src="we-cropper.wxml"/>
<view class="cropper-wrapper">
  <template is="we-cropper" data="{{...cropperOpt}}" />
  <view class="cropper-buttons flex justify-between" style="height: 100rpx;">
    <view class="upload flex justify-center align-center" bindtap="uploadTap" style="width:50%">
      重新选择
    </view>
    <view class="getCropperImage flex justify-center align-center" bindtap="getCropperImage" style="width:50%">
      确定
    </view>
  </view>
</view>

2.在 pages/upload/index.js

import weCropper from './we-cropper'

 
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
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
 
  onLoad(option) {
    const imgsrc=option.src
    console.log(imgsrc)
    const {
      cropperOpt
    } = this.data
    if (imgsrc) {
      Object.assign(cropperOpt, {
        src: imgsrc
      })
      console.log(cropperOpt)
      this.mycropper = new weCropper(cropperOpt)
        .on('ready', function(ctx) {})
        .on('beforeImageLoad', (ctx) => {
          wx.showToast({
            title: '上传中',
            icon: 'loading',
            duration: 3000
          })
        })
        .on('imageLoad', (ctx) => {
          wx.hideToast()
        })
    }
  },

  touchStart(e) {
    this.wecropper.touchStart(e)
  },
 
  touchMove(e) {
    this.wecropper.touchMove(e)
  },
 
  touchEnd(e) {
    this.wecropper.touchEnd(e)
  },
 
  getCropperImage() {
    var self=this
    self.wecropper.getCropperImage((avatar) => {
      console.log(avatar)
      if (avatar) {
        util.saveFilesToCloud({
          files: [avatar],
          dir: config.bucket.dir.avator
        }, {
          success(locations){
            self.setData({
              [`realName.avatarUrl`]: locations[0]
            })
            	self.save(function () {
                wx.redirectTo({
                  url: '/pages/teacherIntro/index'
                })
				      })
          },
          fail (err) {
            console.error(err)
          }
        })
      } else {
        console.log('获取图片失败，请稍后重试')
      }
    })
  },
 
  uploadTap() {
    const self = this
 
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'], 
      success(res) {
        let src = res.tempFilePaths[0]
        console.log(src)
        self.wecropper.pushOrign(src)
        console.log(self.wecropper)
      }
    })
  },
  save(callback){
		request.send(request.urls.saveRealName, {
			method: "PUT",
			data: this.data.realName,
		}, {
			success(data) {
				if (callback) callback(data)
			}
		}, true)
	},
})

3.在前一个页面获取本地图片的事件pages/teacherIntro/index.wxml

<view class="cu-item" bindtap="takephoto1">
					<view class="content">
						<text class="text-center">从相册上传</text>
					</view>
</view>

4.前一个页面js方法

takephoto1() {
		const self = this
		util.chooseImages({
			count: 1,
			sourceType: 2,
			sizeType:2,
			// save: {
			// 	dir: config.bucket.dir.avator
			// }
		}, {
			success(locations) {
				self.setData({
					modalName: null,
					[`realName.avatarUrl`]: locations[0]
				})
				const src=locations[0]
				wx.navigateTo({
					url:'/pages/wecropper/index?src='+src
					})
				// self.save(function () {
				// 	self.setData({
				// 		avator: 'https://' + locations[0]
				// 	})
				// })
			},
			fail(e) {}
		})
	},

ps：希望可以帮助到正在奋斗中的你。。。。。