uniapp图片选择与压缩全攻略

​

使用到的uniapp提供的API

uni.chooseImage 选择图片

uni.compressImage 压缩图片

API具体使用和options可以点击uni-app官网链接

方法实现

选择图片方法:

        微信小程序可以通过使用**uni.chooseImage()** 方法实现选择相册图片或拍照，这个API提供多个参数，详细文档可以点击上方链接到uni-app官网查看

/**
 * @Description: 选择图片
 */
const chooseImage = ():Promise<string> => {
  return new Promise((resolve,reject) => {
    uni.chooseImage({
      count:1,
      sizeType:["compressed"],
      success(res:any) {
        resolve(res.tempFiles[0].path)
      },
      fail:() => { reject() },
    })
  })
}

压缩图片方法:

        方法提供三个形参

                path: 图片路径

                maxSize: 图片压缩后最大文件大小，单位Byte

                quality: 图片压缩率 1 ~ 100，越小压缩率越大

        方法返回一个Promise函数，方法中使用**uni.compressImage()** 方法，压缩成功方法中使用**uni.getFileSystemManager()** 将压缩后的暂存文件路径转换为base64格式的文件

/**
 * @Description: 压缩图片
 */
 const compressImage = (path: string, maxSize: number, quality:number = 100):Promise<string> => {
  return new Promise((resolve, reject) => {
    if(quality === 0) {
      reject(`图片无法压缩至${maxSize}B以下，请重新上传`)
    }
    uni.compressImage({
      src: path, // 文件路径
      quality: quality, // 压缩后图片质量
      compressedWidth: 200, // 压缩后的宽
      compressedHeight: 200, // 压缩后的高度
      success: res => {
        const fs = uni.getFileSystemManager()
        const result = `data:image/png;base64,${fs.readFileSync(res.tempFilePath, 'base64')}`
        if(getStringByteSize(result) > maxSize) {
          compressImage(path, maxSize, quality - 5).then(resolve).catch(reject)
        } else {
          resolve(result)
        }
      }
    })
  })
};

计算字符串字符大小方法:

        由于运行在微信小程序平台，无法使用Blob这个类，只能自己手敲一个计算字符串大小的方法

/**
 * @Description: 字符串字节大小计算函数
 */
const getStringByteSize = (str: string) => {
  let size = 0;
  for (let i = 0; i < str.length; i++) {
    const code = str.charCodeAt(i);
    if (code <= 0x7f) {
      size += 1;
    } else if (code <= 0x7ff) {
      size += 2;
    } else if (code <= 0xffff) {
      size += 3;
    } else {
      size += 4;
    }
  }
  return size;
};

​