微信小程序图片上传压缩

wx.chooseMedia({
  count: 9,
  mediaType: ['image'], // 只允许选择图片
  sourceType: ['album', 'camera'],  // 可以拍摄或从相册中选择
  sizeType:['compressed'],  // 选择压缩图
  camera: 'back', // 后置摄像头
  success(res) {
    console.log(res)
  }
})

wx.canvasToTempFilePath({
  width: 50, // 画布区域的宽度
  height: 50,  // 画布区域的高度
  destWidth: 100,  // 输出图片的宽度
  destHeight: 100,  // 输出图片的高度
  canvasId: 'myCanvas',
  quality: 1,  // 图片质量0-1
  success(res) {
    console.log(res.tempFilePath)
  }
})

wx.compressImage({
  src: '', // 图片路径
  quality: 80 // 压缩质量 0-100
})

  <!-- 将canvas挪出屏幕外 -->
  <view style="position: fixed;top: -9999px;left: -9999px;">
    <canvas type="2d" id='myCanvas{{item}}' style='border: 1px solid;' wx:for="{{bigImgs}}"></canvas>
  </view>

  changeImage() {
      // 图片限制大小
      const fileLimit = 2 * 1024 * 1024
      // 选择图片原图或是压缩图
      const sizeType = this.data.isIos ? ['compressed'] : ['original', 'compressed']
      wx.chooseMedia({
        sizeType,
        count: 9,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        success: async function (res) {
          let tempFiles = res.tempFiles
          if (tempFiles.length) {
            for (let i = 0; i < tempFiles.length; i++) {
              let filePath = tempFiles[i].tempFilePath
              // 图片超过大小限制
              if (tempFiles[i].size > fileLimit) {
                // 手动压缩
                filePath = await this.compressFile(filePath, i, tempFiles[i].size)
              }
              // 上传图片
              wx.uploadFile({
                url: 'xxx',
                filePath,
                name: 'xxx',
                success: function (res) {
                  // 图片上传成功
                },
                fail: function () {
                  // 图片上传失败
                }
              })
            }
          }
        }
      })
    },

    // 压缩
    compressFile(src, i, size) {
      return new Promise((resolve) => {
        // 获取图片信息
        wx.getImageInfo({
          src,
          success: (img) => {
            let imgWidth = img.width
            let imgHeight = img.height
            // 若宽高都小于4096，则使用canvas
            if (imgWidth <= 4096 && imgHeight <= 4096) {
              this.canvasToImg(src, i, imgWidth, imgHeight, size).then(res => {
                resolve(res)
              })
            } else {
              // 强制压缩
              this.compressImage(src, size).then(res => {
                resolve(res)
              })
            }
          },
          fail: () => {
            this.compressImage(src, size).then(res => {
              resolve(res)
            })
          }
        })
      })
    },

    // 绘制canvas
    canvasToImg(src, i, imgWidth, imgHeight, size) {
      return new Promise((resolve, reject) => {
        const { pixelRatio, baseSize } = this.data  // baseSize设为1280，与图片宽高做比较
        let query = wx.createSelectorQuery().in(this)
        query.select(`#myCanvas${i}`)
          .fields({ node: true, size: true })
          .exec((res) => {
            let canvas = res[0].node
            if (!canvas) {
              // 强制压缩
              this.compressImage(src, size).then(res => {
                resolve(res)
              })
              return
            }
            let ctx = canvas.getContext('2d')
            let pic = canvas.createImage()
            pic.src = src
            let canvasWidth = 0
            let canvasHeight = 0
            let quality = 1
            // 图片宽和高都小于基础值，则宽高不变，压缩质量为0.3，这里的基础值设为1280
            if (imgWidth <= baseSize && imgHeight <= baseSize) {
              canvasWidth = imgWidth
              canvasHeight = imgHeight
              quality = .3
            } else {
              let compareFlag = true
              // 手机宽高比大于2，图片一边大于基础值，一边小于基础值，则宽高不变，压缩质量为0.3
              if (pixelRatio > 2 && (imgWidth < baseSize || imgHeight < baseSize) && (imgWidth > baseSize || imgHeight > baseSize)) {
                canvasWidth = imgWidth
                canvasHeight = imgHeight
                quality = .3
              } else {
                // 手机宽高比大于2，宽高最小值设为基础值，另一边等比缩放，手机宽高比小于等于2，宽高最大值设为基础值，另一边等比缩放，压缩质量为0.9
                compareFlag = pixelRatio > 2 ? (imgWidth > imgHeight) : (imgWidth < imgHeight)
                canvasWidth = compareFlag ? parseInt(imgWidth / (imgHeight / baseSize)) : baseSize
                canvasHeight = compareFlag ? baseSize : parseInt(imgHeight / (imgWidth / baseSize))
                quality = .9
              }
            }
            // 设置canvas宽高
            canvas.width = canvasWidth
            canvas.height = canvasHeight
            pic.onerror = () => {
              // 图片加载失败则继续强制压缩
              this.compressImage(src, size).then(response => {
                resolve(response)
              })
            }
            pic.onload = () => {
              ctx.clearRect(0, 0, canvasWidth, canvasHeight);
              ctx.drawImage(pic, 0, 0, canvasWidth, canvasHeight)
              wx.canvasToTempFilePath({
                canvas,
                quality,
                fileType: 'jpg',
                width: canvasWidth,
                height: canvasHeight,
                destWidth: canvasWidth,
                destHeight: canvasHeight,
                success: resp => {
                  // 生成的图片临时文件路径
                  resolve(resp.tempFilePath)
                  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                },
                fail: () => {
                  this.compressImage(src, size).then(response => {
                    resolve(response)
                  })
                }
              })
            }
          })
      })
    },

    // 强制压缩
    compressImage(src, size) {
      return new Promise((resolve, reject) => {
        let quality = 100
        // ios因为自己有压缩机制，压缩到极致就不会再压，因此往小了写
        if (this.data.isIOS) {
          quality = 0.1
        } else {
          let temp = 30 - parseInt(size / 1024 / 1024)
          quality = temp < 10 ? 10 : temp
        }
        wx.compressImage({
          src, // 图片路径
          quality, // 压缩质量
          success: function (res) {
            resolve(res.tempFilePath)
          },
          fail: function (err) {
            resolve(src)
          }
        })
      })
    },