微信小程序使用RenderingContext进行图片尺寸压缩

现在手机摄像头的像素越来越高，把很高像素的照片上传腾讯人脸识别，会发生超时错误，并且消耗了更多的网络流量。通常业务场景要上传的图片，像素要求也没那么高。

目前compressimage只实现了压缩算法的压缩质量调整，并没有改变图片的尺寸，因此，压缩也有限。

在网上查了相关文章，大部分基于老的CanvasContext处理的，现在小程序已经不支持了。

由于对前端程序没什么经验，只有不断问度娘和尝试，终于实现了图片尺寸压缩，分享给大家。

在尝试中发现关键点是，图像的物理像素和逻辑像素的关系，有的使用的逻辑像素，有点使用的物理像素。

具体处理如下：

首先在页面上建一个看不见的canvas：

  <canvas type="2d" id="myCanvas" style="width:{{cWidth}}px;height:{{cHeight}}px; position: absolute;left:-1000px;top:-1000px;"></canvas>

处理函数：

compressImg: function (imgFile) { //imgFile欲压缩的图片文件名和路径

    var that = this;

    console.log("compress start...");

    const query = wx.createSelectorQuery()

    query.select('#myCanvas')

      .fields({

        node: true,

        size: true

      })

      .exec(function (res) {

        const canvas = res[0].node;

        const ctx = canvas.getContext('2d');

        let image = canvas.createImage();

        image.src = imgFile;

        image.onload = function () {

          let styleWidth = image.width; //单位px

          let styleHeight = image.height; //单位px

          var sizeLimit = 200;  //单位px，逻辑像素，欲压缩到的最大边的px数

          if (Math.max(styleWidth, styleHeight) > sizeLimit) {

            var percent = sizeLimit / Math.max(styleWidth, styleHeight);

            styleWidth = Math.trunc(styleWidth * percent)

            styleHeight = Math.trunc(styleHeight * percent)

          }

          const dpr = wx.getSystemInfoSync().pixelRatio;  //获取设备像素比，物理像素和逻辑像素的比值

          //重点：DrawImage使用的物理像素，canvas的width、height一定要设置，否则，图像会变形。因为系统给的初始值和你图片的比例不一致

          canvas.width = styleWidth * dpr;

          canvas.height = styleHeight * dpr;

          //canvas实际显示的是style中的width和height，单位px

          that.setData({

            cWidth: styleWidth,

            cHeight: styleHeight

          });

          ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

//使用jpeg格式，比png要小一个数量级

          let dataURL = canvas.toDataURL("image/jpeg", 0.7);

          //自己后续处理，我直接上传base64编码就可以了;

        }

      })

  },