微信小程序之压缩图片

微信的api提供了压缩图片的接口，但是真机使用时，发现quality设为60以上时，基本无压缩，而在部分机型上，反而还稍微增大一点。而且还不能重复压缩。

鉴于此，只能用其它方式。

想到可以使用画布（canvas）压缩图片，大致思路就是，先把图片画到画布上，然后获取画布上的内容生成图片。可通过指定大小来达到重复压缩的效果。

/**
 * 给的文件资源是否小于LimitSize （M）, 小于走lessCallBack， 大于走moreCallBack
 */
function imageSizeIsLessLimitSize(imagePath, limitSize, lessCallBack, moreCallBack) {
  wx.getFileInfo({
    filePath: imagePath,
    success(res) {
      console.log("压缩前图片大小:", res.size / 1024, 'kb');
      if (res.size > 1024 * 1024 * limitSize) {
        moreCallBack();
      }else {
        lessCallBack();
      }
    }
  })
}

// 主调用方法

/**
 * 获取小于限制大小的Image, limitSize默认为1M，递归调用。
 */
function getLessLimitSizeImage(canvasId, imagePath, limitSize = 1, drawWidth, callBack) {
  console.log(getApp().globalData.systemInfo);
  imageSizeIsLessLimitSize(imagePath, limitSize, 
    (lessRes) =>  {
      callBack(imagePath);
    },
    (moreRes) => {
      wx.getImageInfo({
        src: imagePath,
        success: function (imageInfo) {
          var maxSide = Math.max(imageInfo.width, imageInfo.height);
          //画板的宽高默认是windowWidth
          var windowW = drawWidth;
          var scale = 1;
          if (maxSide > windowW) {
            scale = windowW / maxSide;
          }
          var imageW = Math.floor(imageInfo.width * scale);
          var imageH = Math.floor(imageInfo.height * scale);
          console.log('调用压缩',imageW, imageH);
          getCanvasImage(canvasId, imagePath, imageW, imageH, 
            (pressImgPath) => {
              getLessLimitSizeImage(canvasId, pressImgPath, limitSize, drawWidth * 0.7, callBack);
            }
          );
        }
      })
    }
  )
}

/**
 * 获取画布图片 
 */
function getCanvasImage(canvasId, imagePath, imageW, imageH, getImgsuccess) {
  const ctx = wx.createCanvasContext(canvasId);
  ctx.drawImage(imagePath, 0, 0, imageW, imageH);
  ctx.draw(false, () => {
    wx.canvasToTempFilePath({
      canvasId: canvasId,
      x: 0,
      y: 0,
      width: imageW,
      height: imageH,
      quality: 1,
      success(res) {
        getImgsuccess(res.tempFilePath);
      }
    });
  });
}

可以把这几个方法写到一个工具类里面，然后导出

module.exports = {
  getLessLimitSizeImage: getLessLimitSizeImage,
}

主方法getLessLimitSizeImage调用的时候，需要在调用页面的wxml文件中增加一个canvas组件，

// windowWidth为屏幕宽度
<canvas 
  canvas-id='pressCanvas' 
  class='press-canvas' 
  style='width: {{ windowWidth }}px; height: {{ windowWidth }}px;' ></canvas>

js设置如下，让canvas组件显示不出来即可。

.press-canvas {
  position: absolute;
  top: -1000px;
  background-color: gray;
}