微信小程序开发之图片压缩方案

目录

 前言：

问题：现有的压缩方案支付宝小程序不生效

解决方案：

uni.createCanvasContext(canvasId, this)

核心代码展示：

1，封装公用工具类compressImage.js

2，html调用并上传服务器：

小结：

---

前言：

由于公司业务拓展，急需基于uniapp生成支付宝小程序。之前已经成功将微信小程序和H5融合成一套码，故得知此需求的时候，笔者信心十足，但是本着实践出真知的想法，觉得还是得先调研一下uniapp在支付宝小程序的兼容性，并集成已有项目主体关键功能，为后续的技术调研方案做准备。在调研过程中，发现之前封装好的图片压缩方法在支付宝小程序上无法正常使用，重新阅读了官方文档后，又双更新了项目的图片压缩方法的使用流程。

问题：现有的压缩方案支付宝小程序不生效

之前封装好的压缩方案，原理是使用canvas现实的，但是在支付宝小程序端不生效，canvas相关的api存在但是不可用。

解决方案：

查阅文档后，给canvas添加了id区分支付宝小程序，可兼容之。

以下是官方文档原文

uni.createCanvasContext(canvasId, this)

#定义

画布表示，传入定义在  的 canvas-id或id（支付宝小程序是id、其他平台是canvas-id）

核心代码展示：

1，封装公用工具类compressImage.js

/**
 * 给的文件资源是否小于LimitSize （M）, 小于走lessCallBack， 大于走moreCallBack
 */
export function imageSizeIsLessLimitSize(imagePath, limitSize, lessCallBack, moreCallBack) {
  uni.getFileInfo({
    filePath: imagePath,

    success(res) {
      console.log('压缩前图片大小:', res.size / 1024, 'kb')

      if (res.size > 1024 * 1024 * limitSize) {
        moreCallBack()
      } else {
        lessCallBack()
      }
    }
  })
} // 主调用方法

/**
 * 获取小于限制大小的Image, limitSize默认为1M，递归调用。
 */

export function getLessLimitSizeImage(canvasId, imagePath, limitSize = 1, drawWidth, callBack) {
  imageSizeIsLessLimitSize(
    imagePath,
    limitSize,
    (lessRes) => {
      callBack(imagePath)
    },
    (moreRes) => {
      uni.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)
          })
        }
      })
    }
  )
}
/**
 * 获取画布图片
 */

export function getCanvasImage(canvasId, imagePath, imageW, imageH, getImgsuccess) {
  const ctx = uni.createCanvasContext(canvasId)
  ctx.drawImage(imagePath, 0, 0, imageW, imageH)
  ctx.draw(false, () => {
    uni.canvasToTempFilePath({
      canvasId: canvasId,
      x: 0,
      y: 0,
      width: imageW,
      height: imageH,
      quality: 1,

      success(res) {
        getImgsuccess(res.tempFilePath)
      }
    })
  })
}
export default {
  getLessLimitSizeImage,
  imageSizeIsLessLimitSize,
  getCanvasImage
}

2，html调用并上传服务器：

小结：

以上就是笔者分享的图片压缩上传的方法封装及使用啦，完美兼容支付宝小程序，微信小程序及H5三端。希望对大家有所帮助。如有错误希望各位大神多多指教。