纯前端H5压缩图片

/**
 * @description H5 纯前端压缩图片 返回blob
 * @param {*} filePath blob url
 * @param {*} width 压缩之后的canvas的width
 * @returns
 */
export const compressImg = (filePath, width = 500) => {
  return new Promise((resolve, reject) => {
    if (!filePath) return reject()
    let img = new Image()
    img.setAttribute('crossOrigin', 'anonymous') // image设置跨域
    img.onload = (e) => {
      //获取原图片的宽高比例
      let whRate = 1
      let imgOriginalWidth
      let imgOriginalHeight
      
      // ios的话 e里是没有path.width的
      if (e?.path?.[0]?.width) {
        imgOriginalWidth = e.path[0].width
        imgOriginalHeight = e.path[0].height
      } else {
        // ios 走这
        imgOriginalWidth = img.width
        imgOriginalHeight = img.height
      }
      // 宽高比
      whRate = imgOriginalWidth / imgOriginalHeight

      // 加canvas dom
      let canvasBox = document.createElement('div')
      let canvas = document.createElement('canvas')
      canvasBox.className = 'compressImg_canvas_class' // canvas class
      canvasBox.appendChild(canvas)
      document.body.appendChild(canvasBox)
      let context = canvas.getContext('2d')
      let cW = width
      let cH = width / whRate
      canvas.width = cW
      canvas.height = cH
      context.drawImage(img, 0, 0, cW, cH)
      canvas.toBlob((blob) => {
        setTimeout(() => {
          document.body.removeChild(canvasBox)
        }, 1)
        return resolve(blob) // 出口
      })
    }
    img.src = filePath
  })
}