pk8f3pmu2/miniprogram/avatar/pages/image_crop/image_crop.js

import WeCropper from '../../we-cropper/dist/we-cropper.min.js'
const app = getApp();
Page({
  data: {
  },

  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)
  },
  upload_avartar(filePath) {
    return new Promise((resolve, reject) => {
      wx.getFileSystemManager().readFile({
        filePath,
        encoding: "base64",
        success: res => {
          let image = "data:image/jpeg;base64," + res.data;
          app.api("users.accounts.avatar")({ image }).then(resolve);
        },
        fail: reject
      });
    });
  },
  getCropperImage() {
    console.warn("ontap: getCropImage")
    this.mycropper.getCropperImage((avatar) => {
      console.log(avatar);
      if (avatar) {
        console.info("avatar");
        console.log(avatar);
        wx.showLoading({
          title: '上传中',
        });
        this.upload_avartar(avatar).then(res => {
          console.log("upload avatar success");
          console.log(res);
          wx.navigateBack({
            delta: 1
          });
          wx.hideLoading();
          wx.showToast({
            title: '更改成功',
          });
        }).catch(error => {
          console.error(error);
          wx.showToast({
            title: '失败',
            icon: "none"
          });
          wx.hideLoading();
        });

      } else {
        wx.showToast({
          title: '获取图片失败',
          icon: "none"
        });
      }
    })
  },
  uploadTap() {
    const self = this
    wx.chooseImage({
      count: 1,
      success(res) {
        const src = res.tempFilePaths[0]
        self.mycropper.pushOrign(src)
      }
    })
  },
  initCrop(src) {
    const { cropperOpt } = this.data;
    Object.assign(cropperOpt, { src });
    this.mycropper = new WeCropper(cropperOpt);
    this.mycropper
      .on('beforeImageLoad', (ctx) => {
        console.info("beforeImageLoad");
        wx.showLoading({
          title: '上传中'
        })
      })
      .on('imageLoad', (ctx) => {
        console.info("imageLoad")
        wx.hideLoading();
      })
      .updateCanvas();
  },
  onLoad(option) {
    let device = wx.getSystemInfoSync();
    let width = device.windowWidth;
    let height = device.windowHeight - 42;
    let cropperOpt = {
      id: 'cropper',
      scale: 3.2,
      zoom: 8,
      width,
      height,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300
      }
    }
    this.setData({ cropperOpt});
    const { src } = option;
    if (src) {
      this.initCrop(src);
    } else {
      wx.chooseImage({
        count: 1,
        success: res => {
          const src = res.tempFilePaths[0];
          if (src)
            this.initCrop(src);
          else
            wx.navigateBack({
              delta: 1
            });
        },
        fail: e => {
          wx.navigateBack({
            delta: 1
          });
        }
      })
    }
  }
})