微信小程序canvas 压缩文件并上传

 //需要隐藏

<view style='width:0px;height:0px;overflow:hidden;'>
 <canvas style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;" canvas-id="attendCanvasId"></canvas>
</view>

   //data中的数据

Images:[],
    // 接收压缩后的图片
    compressImages: [],
    // 预设画布宽高
    canvasWidth: 0,
    canvasHeight: 0,

prodImageOpt: function () {
  let that = this
  wx.canvasToTempFilePath({
      canvasId: 'attendCanvasId', // 画布id
      fileType: 'jpg', // 压缩图片的格式
      quality: 1, // 压缩图片的质量，进‘jpg’格式可用
      success: function (res) {
        console.log(res.tempFilePath)
          let arr = that.data.compressImages
          arr.push(res.tempFilePath)
          console.log(res)
          console.log(arr[0])
          that.setData({
              compressImages: arr
          })
          // 查看文件压缩后的信息
          wx.getImageInfo({
              src: res.tempFilePath,
              success: function (res) {
                  console.log(res.path)
              }
          })
          
      }
      
      
  })
},


// 绘图  如果只传一张图则不需要循环
drawCanvas(){
  this.setData({
      compressImages: []
  }, () => {
          const ctx = wx.createCanvasContext('attendCanvasId')
          let that = this
          for (let i in this.data.Images) {
              let item = this.data.Images[i]
              console.log(item)
              wx.getImageInfo({
                  src: item,
                  success: function (res) {
                    console.log(res.path)
                      if (res.width > 750) { // 判断图片超过一定像素侯进行压缩
                          // 获取原图比例
                          let scale = res.width / res.height
                          that.setData({
                              canvasWidth: 750,
                              canvasHeight: 750 / scale
                          })
                          console.log(that.data.Images[0])
                          console.log(that.data.canvasWidth)
                          // 画出压缩图片
                          ctx.drawImage(that.data.Images[0], 0, 0, that.data.canvasWidth, that.data.canvasHeight)
                          ctx.draw()
                          // 等待压缩图片生成
                          setTimeout(() => {
                            that.prodImageOpt()
                          }, 2000);
                      }
                  }
              })
          }
  })
},