wxml:

<canvas canvas-id='attendCanvasId' class='myCanvas' style='width: {{canvasW + "px"}}; height: {{canvasH + "px"}}'></canvas>
<button bindtap='takePhoto'>畫布上傳</button>

<view wx:for="{{imgViewList}}" wx:key="{{index}}">
  <image mode='widthFix' src="{{item}}" />
</view>

js:

// pages/canvas/index.js
const MD5 = require('../../utils/uploadfile/MD5.js'); //圖片名字轉(zhuǎn)md5
const app = getApp();

Page({
  data: {
    imgViewList: []
  },
  onShow() {
    const token = wx.getStorageSync("jwt");
    wx.request({
      url: app.globalData.baseUrl + '/api/oss/frontend_sts_token',
      method: 'get',
      header: {
        'content-type': 'application/json',
        'Authorization': "Bearer " + token
      },
      success: res => {
        this.setData({
          sts_token_data: res.data.data
        })
      }
    })
  },
  takePhoto: function () {
    var that = this;
    //拍照、從相冊(cè)選擇上傳
    wx.chooseImage({
      count: 9,  //這個(gè)是上傳的最大數(shù)量，默認(rèn)為9
      sizeType: ['compressed'],  //這個(gè)可以理解為上傳的圖片質(zhì)量類型（官方給的）温治，雖然沒(méi)什么卵用悠菜，要不然還要我們自己寫壓縮做什么
      sourceType: ['album', 'camera'],  //這個(gè)是圖片來(lái)源，相冊(cè)或者相機(jī)
      success: function (res) {
        console.log(res)
        var tempFilePaths = res.tempFilePaths  //這個(gè)是選擇后返回的圖片列表
        that.getCanvasImg(0, 0, tempFilePaths);  //進(jìn)行壓縮
        wx.showLoading({
          title: '圖片壓縮上傳中...',
          icon: 'none'
        })
      }
    });
  },
  //壓縮并獲取圖片抓歼，這里用了遞歸的方法來(lái)解決canvas的draw方法延時(shí)的問(wèn)題
  getCanvasImg: function (index, failNum, tempFilePaths) {
    var that = this;
    if (index < tempFilePaths.length) {
      wx.getImageInfo({
        src: tempFilePaths[index],
        success: imginfo=>{
          const radio = imginfo.height/imginfo.width;
          const imgurl = imginfo.path;
          that.setData({
            canvasW: 300,
            canvasH: 300 * radio
          },function(){
            setTimeout(() => {
              const ctx = wx.createCanvasContext('attendCanvasId');
              ctx.drawImage(imgurl, 0, 0, 300, 300 * radio);
              ctx.draw(true, function () {
                console.log(index)
                index = index + 1;//上傳成功的數(shù)量讥此，上傳成功則加1
                wx.canvasToTempFilePath({
                  canvasId: 'attendCanvasId',
                  success: function success(res) {
                    that.uploadCanvasImg(res.tempFilePath, tempFilePaths.length);
                    setTimeout(() => {
                      that.getCanvasImg(index, failNum, tempFilePaths);
                    }, 500)
                  }, fail: function (e) {
                    failNum += 1;//失敗數(shù)量，可以用來(lái)提示用戶
                    that.getCanvasImg(index, failNum, tempFilePaths);
                  }
                });
              });
            }, 500)
          })          
        }
      })      
    }
  },
  //上傳圖片
  uploadCanvasImg: function (canvasImg, len) {
    var that = this;
    let sts_token_data = that.data.sts_token_data;
    let imgViewList = that.data.imgViewList;
    const imgName = canvasImg.split("tmp")[1].slice(1); // 截圖圖片名稱部分
    const imgMd5Name = MD5.hexMD5(imgName);
    const aliyunFileKey = sts_token_data.dir + imgMd5Name + '.jpg'; //生成
    wx.uploadFile({
      url: sts_token_data.host, //文件服務(wù)器的地址
      filePath: canvasImg,
      formData: {
        'key': aliyunFileKey,
        'OSSAccessKeyId': sts_token_data.accessid,
        'policy': sts_token_data.policy,
        'signature': sts_token_data.signature,
        'success_action_status': '200',
      },
      name: 'file',
      success: function (res) {
        console.log(res)
        let url = app.globalData.imgUrl + aliyunFileKey
        // var json2map = JSON.parse(res.data);
        imgViewList.push(url);
        that.setData({
          imgViewList,
        });
        if (imgViewList.length == len){
          wx.hideLoading()
        }
      }
    })
  },
})