微信小程序：canvas实现图片压缩

故事背景
卤煮项目中有OCR证件识别的需求，像这种前端向后台发送图片的操作，我们这边肯定是要把图片压缩一下再传给后台的，比如卤煮MI 10 pro拍一张要10兆起步，这上传起来还不要了老命啦~~看网上大佬都说微信自带的wx.compressImage不是很好用，所以咱就直接用canvas进行压缩吧！！！！！！
强烈建议：主要跳转画布大小和压缩质量，不然给你压个20KB？？？

需求实现

1.首先我们需要一个canvas画布，记得把它设置在某个隐秘的角落~~

<canvas canvas-id='photo_canvas' style='position:fixed;left: 9999px;width:500px;height:{{ canvasHeight }}px' class='myCanvas'></canvas>

2.卤煮的图片，支持拍照和相册读取图片，直接上代码

拍照：

takePhoto() {
  var that = this;
  const ctx = wx.createCameraContext();
  ctx.takePhoto({
    success: (res) => {
      console.log(res);
      that.setData({ temporaryImg: res.tempImagePath });
      that.compressImage(res.tempImagePath, (res1) => {  // 压缩方法
        that.setData({ temporaryImg: res1 });
      });
    }
  })
},

相册选取：

// 选择照片
chooseimg(){
  var that = this;
  wx.chooseImage({
    count: 1, // 默认9  
    sizeType: ['original'], // 因为下面走压缩了，这里就原图上传
    sourceType:['album'], // 可以指定来源是相册还是相机，默认二者都有  
    success:(res)=> {
      that.compressImage(res.tempFilePaths[0], (res1) => { // 压缩方法
        that.setData({ temporaryImg: res1 });
        that.uploadImg(); // 上传后台的方法
      });
    },
  })
},

canvas压缩：

// 压缩图片
compressImage(path, callback) {
  var that = this;
  //获取图片信息
  wx.getImageInfo({
    src: path,
    success: function (res) {
      var ctx = wx.createCanvasContext('photo_canvas'); // 创建画布
      var towidth = 500;  //设置canvas尺寸，按宽度500px的比例压缩
      var toheight = Math.trunc(500*res.height/res.width);  //根据图片比例换算出图片高度
      that.setData({ canvasHeight: toheight });
      ctx.drawImage(path, 0, 0, res.width, res.height, 0, 0, towidth, toheight);
      ctx.draw(false, function () {
        wx.canvasToTempFilePath({
          canvasId: 'photo_canvas',
          fileType:"jpg",
          quality: 0.8, // 注意你的压缩质量，卤煮真的压缩出20KB的，图片整个都是糊的
          success: function (res) {
            console.log(res.tempFilePath);
            callback(res.tempFilePath);
          }
        }, this)
      })
    }
  });
},

是的，canvas压缩就是如此简单！！！！！！
canvas能做的还很多，可惜卤煮没咋接触过，去学习啦！！！！！！
欢迎大佬踢馆，共同进步~