saas_miniprogram/common/compressPhoto.js

//通过canvas将图片压缩至指定大小

//判断图片大小是否满足需求,limitSize的单位是kb
function imageSizeIsLessLimitSize(imagePath,limitSize,lessCallback,moreCallback){
    console.log('------imagePath,limitSize,lessCallback,moreCallback', imagePath,limitSize,lessCallback,moreCallback)
    //获取文件信息
    wx.getFileSystemManager().getFileInfo({
      filePath: imagePath,
      success:(res)=>{
        // console.log("压缩前图片大小",res, res.size/1024,'kb');
        if(res.size > 1024*limitSize){
          moreCallback()
        } else {
          lessCallback()
        }
      }
    })
  }
  
  //将图片画在画布上并获取画好之后的图片的路径
  function getCanvasImage(canvasId,imagePath,imageW,imageH,getImgSuccess){
    //创建画布内容
    const ctx = wx.createCanvasContext(canvasId)
    //图片画上去，imageW和imageH是画上去的尺寸，图像和画布间隔都是0
    ctx.drawImage(imagePath, 0, 0, imageW, imageH);
    //这里一定要加定时器，给足够的时间去画（所以每次递归最少要耗时200ms，多次递归很耗时！）
    ctx.draw(false, setTimeout(() => {
      //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
      wx.canvasToTempFilePath({
        canvasId: canvasId,
        x: 0,
        y: 0,
        width: imageW,
        height: imageH,
        quality: 1, // 取0-1,1最高质量
        fileType: 'jpg',
        success:(res)=>{
          //将取出的图片路径通过回调函数返回
          getImgSuccess(res.tempFilePath);
        }
      })
    },200));
  }
  
  //主函数，默认限制大小2048kb即2mb,drawWidth是绘画区域的大小
  //初始值传入为画布自身的边长（我们这是一个正方形的画布）
  function getLessLimitSizeImage(canvasId, imagePath, limitSize=1024, drawWidth, callback) {
    //判断图片尺寸是否满足要求
    imageSizeIsLessLimitSize(imagePath,limitSize,
      (lessRes)=>{
        //满足要求走callback，将压缩后的文件路径返回
        console.log('满足要求走callback:', imagePath)
        callback(imagePath);
      },
      (moreRes)=>{
        //不满足要求需要压缩的时候
        wx.getImageInfo({
          src: imagePath,
          success:(imageInfo)=>{
            let maxSide = Math.max(imageInfo.width,imageInfo.height);
            let windowW = drawWidth
            let scale=1;
            /*
            这里的目的是当绘画区域缩小的比图片自身尺寸还要小的时候
            取图片长宽的最大值，然后和当前绘画区域计算出需要放缩的比例
            然后再画经过放缩后的尺寸，保证画出的一定是一个完整的图片。由于每次递归绘画区域都会缩小，
            所以不用担心scale永远都是1绘画尺寸永远不变的情况，只要不满足压缩后体积的要求
            就会缩小绘画区域，早晚会有绘画区域小于图片尺寸的情况发生
            */
            if(maxSide>windowW){
              scale = windowW/maxSide
            }
            //trunc是去掉小数
            let imageW = Math.trunc(imageInfo.width*scale)
            let imageH = Math.trunc(imageInfo.height*scale)
            // console.log('调用压缩',imageW,imageH);
            //图片在规定绘画区域上画并获取新的图片的path
            getCanvasImage(canvasId,imagePath,imageW,imageH,
              (pressImgPath)=>{
                /*
                再去检查是否满足要求，始终缩小绘画区域，让图片适配绘画区域
                这里乘以0.95是必须的，如果不缩小绘画区域，会出现尺寸比绘画区域小，
                而体积比要求压缩体积大的情况出现，就会无穷递归下去，因为scale的值永远是1
                但0.95不是固定的，你可以根据需要自己改，0到1之间，越小则绘画区域缩小的越快
                但不建议取得太小，绘画区域缩小的太快，压出来的将总是很糊的
                */
                getLessLimitSizeImage(canvasId,pressImgPath,limitSize,drawWidth*0.95,callback);
              }
            )
          }
        })
      }
    )
  }
  
  export default getLessLimitSizeImage