uniapp 小程序压缩图片

uniapp 小程序压缩图片

小程序压缩图片和普通 html 压缩图片思路一致。

步骤为：

1. 获取图片信息
2. 获取canvas 节点
3. 创建图片对象
4. 压缩图片

详细代码

/**
 * 获取图片信息
 * @param {string} imgObj 图片对象path
 * @param {function} fn 回调函数
 * @returns {ojbect} cbParams 
 * {
 *  height: 722,
 *  width: 1366,
 *  type: 'png',
 *  path: '',
 *  orientation: 'up',
 *  errMsg: ''
 * }
 */
function getimageObject (src, fn) {
  uni.getimageInfo({
    src: src,
    success (res) {
      fn(res)
    }
  })
}

/**
 * 压缩图片
 * @param {object} img 图片
 * @param {function} fn 回调函数
 */
function compressImg (img, fn) {
  const selectorQuery = uni.createSelectorQuery()
  selectorQuery.select('#canvas')
    .fields({node: true, size: true})
    .exec(res => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      canvas.height = img.height
      canvas.width = img.width

      let seal = canvas.createImage();
      seal.src = img.path;
      seal.onload = () => {
        ctx.drawImage(seal, 0, 0, img.width, img.height)
        const url = canvas.toDataURL('image/jpeg', .1)
        fn(url)
      }
    })
}

使用方法

getimageObject(list[0].file.path, img => {
  compressImg(img, res => {
    console.log(res);
  })
})

新发现

base64字符的长度就是文件尺寸