微信小程序用wx.compressImag压缩照片

最近在用政府应用时，上传图片提示照片太大（现在用手机拍的照片基本都是几M以上），手机压缩图片没有电脑那么方便，所以专门去下载了个app来搞。这种使用频率很低，一年没用几回，想着要是有个小程序就方便了。

微信小程序从基础库2.4.0开始，提供压缩图片接口，支持可选压缩质量。

接口传送门：wx.compressImage

所以自己动手搞了个Demo，还可以批量多图压缩，效果请扫码查看：

主要用到的小程序接口如下：

1、wx.chooseMedia，选择照片接口，基础库 2.10.0 开始支持

wx.chooseMedia({
  count: 9, // 最多选择照片数
  mediaType: ['image'], // 选择的文件类型是image
  sourceType: ['album', 'camera'], // 图片和视频选择的来源：相册选择/相机拍摄
  sizeType: ['original'], // 是否压缩所选文件
  camera: 'back', // 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头
  success: (res) => {
    console.log(res) // 返回文件列表
  }
})

可以发现chooseMedia本身有个参数sizeType支持compressed压缩，但是不能选择压缩质量，不是我们想要的效果。

2、wx.getFileSystemManager 获取文件信息

// 如果你想知道，原始的图片大小信息，可以用getFileInfo来获取
const fs = wx.getFileSystemManager();
fs.getFileInfo({
    filePath: item.tempFilePath, // item是chooseMedia的success回调里的res.tempFiles数组的元素，后面有完整代码
    success: r => {
      item.size =  Math.ceil(r.size / 1024);
    }
})

3、wx.getImageInfo 获取图片的尺寸

wx.getImageInfo({
    src: item.tempFilePath, // item是chooseMedia的success回调里的res.tempFiles数组的元素，后面有完整代码
    success: r => {
      item.width = r.width;
      item.height = r.height;
    }
})

4、wx.compressImage 压缩图片

wx.compressImage({
    src: item.tempFilePath, // 图片路径，item是chooseMedia的success回调里的res.tempFiles数组的元素，后面有完整代码
    quality: this.data.quality, // 压缩质量
    success: r => {
      item.compressTempFilePath = r.tempFilePath
      fs.getFileInfo({
        filePath: item.compressTempFilePath,
        success: r => {
          item.compressSize =  Math.ceil(r.size / 1024) + '';
          this.setData({
            imgFiles: res.tempFiles
          })
        }
      })
    }
})

5、从选择到压缩，完整代码如下：

const fs = wx.getFileSystemManager();
wx.chooseMedia({
  count: 9,
  mediaType: ['image'],
  sourceType: ['album', 'camera'],
  sizeType: ['original'],
  camera: 'back',
  success: (res) => {
    console.log(res)
    res.tempFiles.forEach(item => {
      fs.getFileInfo({
        filePath: item.tempFilePath,
        success: r => {
          item.size =  Math.ceil(r.size / 1024);
        }
      })

      wx.getImageInfo({
        src: item.tempFilePath,
        success: r => {
          item.width = r.width;
          item.height = r.height;
          this.setData({
            imgFiles: res.tempFiles
          })
        }
      })
      wx.compressImage({
        src: item.tempFilePath, // 图片路径
        quality: this.data.quality, // 压缩质量
        success: r => {
          item.compressTempFilePath = r.tempFilePath
          fs.getFileInfo({
            filePath: item.compressTempFilePath,
            success: r => {
              item.compressSize =  Math.ceil(r.size / 1024) + '';
              this.setData({
                imgFiles: res.tempFiles
              })
            }
          })
        }
      })
    })
    //console.log(res.tempFiles.tempFilePath)
    //console.log(res.tempFiles.size)
  }
})

6、wx.saveImageToPhotosAlbum 最后是保存照片

wx.saveImageToPhotosAlbum({
  filePath: '压缩后生成的临时文件url',
  success(res) {
    if(res.errMsg === 'saveImageToPhotosAlbum:ok') {
      wx.showToast({
        title: '保存成功',
        icon: 'success',
        duration: 2000
      })          
    }
  }
})

最后再来张效果图呗：

待排查的问题点：

• 有些图片压缩后的质量大小还比压缩前的还大，暂时没搞懂是为啥