故事背景 卤煮项目中有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能做的还很多，可惜卤煮没咋接触过，去学习啦！！！！！！ 欢迎大佬踢馆，共同进步~
