pk8f3pmu2/miniprogram/setting/pages/image_crop/image_crop.js

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

const rich_message = "检测到所选的图片中有敏感内容，请选择其他图片";

const app = getApp();
Page({
  data: {
  },

  touchStart(e) {
    
    this.mycropper.touchStart(e)
  },
  touchMove(e) {
    this.mycropper.touchMove(e)
  },
  touchEnd(e) {
    this.mycropper.touchEnd(e)
  },
  onGetUserInfo(e){
    console.log(e);
    let {detail:{userInfo}} = e;
    if(userInfo&&userInfo.avatarUrl){
      let path = userInfo.avatarUrl;
      this.mycropper.pushOrign(path);
    }else{
      wx.showToast({
        title: '微信头像获取失败',icon:"none"
      })
    }
  },
  async _checkImg({path}){
    let match = path.match(/(\.[^\.]*?)$/)
    if(match)
      var ext = match[0];
    else
      var ext = ".jpg";
    let cloudPath = "images/temp/"+ app.globalData.openid + "-" + Date.now() + ext;
    let res = await wx.cloud.uploadFile({
      cloudPath,
      filePath: path
    });
    let {fileID} = res;
    return app.openapi("security.imgSecCheck")({fileID});
  },
  checkImg({path}){
    if(this.promise&&path==this.tmp_path)
      return this.promise;
    this.promise = this._checkImg({path});
    this.tmp_path = path;
    this.promise.then(res=>{
      console.log(res);
      if(res.errCode==87014){
        wx.showToast({
          title:rich_message,icon: "none",duration:5000
        })
      }
    });
    return this.promise;
  },
  onConfirm(){
    this.setData({submitting:1});
    if(!this.mycropper||!this.mycropper.src)
      return wx.showToast({
        title: '请先选取图片',icon:"none"
      })
    let {croperTarget} = this.mycropper;
    wx.showLoading({
      title: '检查图片中...',
    })
    this.checkImg({path: croperTarget}).then(res=>{
      if(res.errCode==0)
        this.startUpload();
      else if(res.errCode==87014){
        wx.hideLoading();
        wx.showModal({
          content:rich_message,showCancel: false
        });
        this.setData({submitting:0});
      }else{
        wx.showToast({
          title: '发生了未知错误，请重试',icon:"none"
        });
        this.promise = null;
        let {croperTarget} = this.mycropper;
        this.checkImg({path:croperTarget});
        this.setData({submitting:0});
        
        wx.reportMonitor('2', 1);
        global.realTimeLog.error("未知错误 checkImg1", res);
        global.realTimeLog.setFilterMsg("unexpected");
      }
    }).catch(e=>{
      wx.hideLoading();
      wx.showToast({
        title: '请求超时，请重试',icon:"none"
      });
      this.promise = null;
      let {croperTarget} = this.mycropper;
      this.checkImg({path:croperTarget});
      this.setData({submitting:0});

      wx.reportMonitor('2', 1);
      global.realTimeLog.error("未知错误 checkImg2", e);
      global.realTimeLog.setFilterMsg("unexpected");
    })
  },
  uploadAvartar(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).catch(reject);
        },
        fail: reject
      });
    });
  },
  startUpload() {
    this.setData({submitting:1});
    this.mycropper.getCropperImage((avatar) => {
      if (avatar) {
        wx.showLoading({
          title: '上传头像中',
        });
        this.uploadAvartar(avatar)
        .then(res => {
          wx.hideLoading();
          wx.showToast({
            title: '更改成功',
          });
          this.setData({submitting:0});
          setTimeout(()=>{
            wx.navigateBack({
              delta: 1
            });
          },500);
        }).catch(e => {
          wx.hideLoading();
          wx.showToast({
            title: '上传失败',
            icon: "none"
          });
          this.setData({submitting:0});
        });
      } else {
        wx.showToast({
          title: '图片截取失败',
          icon: "none"
        });
        this.setData({submitting:0});
      }
    })
  },
  chooseImage({navback=0}={}) {
    wx.chooseImage({
      count: 1,
      sizeType:["compressed"],
      success:(res) =>{
        let {path, size} = res.tempFiles[0];
        if(!path&&navback){
          wx.navigateBack({
            delta:1
          })
        }
        if(size>1e6){
          // unexpected error
          wx.reportMonitor('2', 1);
          global.realTimeLog.error("头像超过大小",size);
          global.realTimeLog.setFilterMsg("avatar");
          wx.showToast({
            title: '对不起，图片过大，请重新选择',icon:"none", duration:3000
          });
          return;
        }
        if(!this.mycropper)
          this.initCanvas(path);
        else{
          this.mycropper.pushOrign(path)
        }
      },fail:e=>{
        console.log(e);
        if(navback)
          wx.navigateBack({
            delta:1
        })
      }
    })
  },
  initCanvas(src="") {
    const { cropperOpt } = this.data;
    if(src)
      Object.assign(cropperOpt, { src });
    this.mycropper = new WeCropper(cropperOpt);
    this.mycropper
      .on('beforeImageLoad', (ctx) => {
        wx.showLoading({title: '图片加载中'})
      })
      .on('imageLoad', (ctx) => {
        let {croperTarget} = this.mycropper;
        this.checkImg({path:croperTarget});
        wx.hideLoading();
      })
      .updateCanvas();
  },
  setCanvasOptions:function(){
    let device = wx.getSystemInfoSync();
    let width = device.windowWidth;
    let height = device.windowHeight - 42;
    let cropperOpt = {
      id: 'cropper',
      scale: 3.2,
      zoom: 8,
      width,
      height,
      boundStyle:{
        color:"#0080f0",
        lineWidth: 1.2
      },
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300
      }
    }
    this.setData({ cropperOpt});
  },
  onLoad(option) {
    this.setCanvasOptions();
    const { src="" } = option;
    this.initCanvas(src);
    this.chooseImage({navback:1})
  }
})