微信小程序之压缩图片

微信的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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 给提问的开发者的建议:提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。 写一个简明扼要的标题,并且...
    极乐叔阅读 14,096评论 0 3
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,479评论 0 9
  • 在小程序里,我们知道分享功能只有分享到微信好友或者群,无法直接分享到朋友圈,但是我们可以生成分享图片,然后保存到相...
    anloney阅读 3,926评论 5 1
  • 7.1 压缩图片 一、基础知识 1、图片的格式 jpg:最常见的图片格式。色彩还原度比较好,可以支持适当压缩后保持...
    AndroidMaster阅读 2,589评论 0 13
  • 我不知道我究竟身处何地 我小心翼翼地打量着周边的环境 紧张 焦急 却不知所措 我到底在何方 我又该去何方 我有我想...
    Angel李子汐阅读 1,075评论 16 31