pk8f3pmu2/pages/image_crop/image_crop.js

import WeCropper from '../../we-cropper/dist/we-cropper.min.js'


const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 40
const app = getApp();

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) {
    console.log(e);
    this.mycropper.touchStart(e)
  },

  touchMove(e) {
    console.log(e);
    this.mycropper.touchMove(e)
  },

  touchEnd(e) {
    console.log(e);
    this.mycropper.touchEnd(e)
  },

  getCropperImage() {
    console.warn("ontap: getCropImage")
    this.mycropper.getCropperImage((avatar) => {
      console.log(avatar);
      if (avatar) {
        console.info("avatar");
        console.log(avatar);
        wx.showLoading({
          title: '上传中',
        });
        app.client.upload_avatar({
          avatar_path: avatar,
          success: res=>{
            console.log("upload avatar success");
            console.log(res);
            wx.navigateBack({
              delta: 1
            });
            wx.showToast({
              title: '更改成功',
            })
          },
          fail: error=>{
            console.error(error);
            wx.showToast({
              title: '失败',
              icon: "none"
            });
          },
          complete:()=>{
            wx.hideLoading()
          }
        });
      } else {
        console.error('获取图片失败')
      }
    })
  },

  uploadTap() {
    const self = this

    wx.chooseImage({
      count: 1,
      success(res) {
        const src = res.tempFilePaths[0]
        self.mycropper.pushOrign(src)
      }
    })
  },

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

    if (src) {
      Object.assign(cropperOpt, {src})
      this.mycropper = new WeCropper(cropperOpt);
      this.mycropper
        .on('ready', function (ctx) { 
          console.info("ready");
          console.info(ctx);
        })
        .on('beforeImageLoad', (ctx) => {
          console.info("beforeImageLoad");
          wx.showToast({
            title: '上传中',
            icon: 'loading',
            duration: 3000
          })
        })
        .on('imageLoad', (ctx) => {
          console.info("imageLoad")
          wx.hideToast()
        })
        .on('beforeDraw', (ctx, instance) => {
          console.log(`before canvas draw,i can do something`)
          console.log(`current canvas context:`, ctx)
        })
        .updateCanvas();
    }
  }
})