base64压缩

1

/**
 * 压缩图片
 * base64   : 图片base64字符串
 * w        : 图片宽高最大值
 * callback : 回调函数
 * quality  : 压缩系数0-1之间, 默认0.92
 * limit    : 压缩限制字符串长度单位(KB)
 * 使用:
 * import { compressBase64 } from '@/utils'
 * compressBase64(原base64, 1000, async (base64) => {
 *    console.log(base64.length)
 * })
 */
export function compressBase64 (base64, w, callback, quality = 0.92, limit = 500) {
  let newImage = new Image()
  newImage.src = base64
  newImage.setAttribute('crossOrigin', 'Anonymous')
  let imgWidth, imgHeight
  newImage.onload = function () {
    imgWidth = this.width
    imgHeight = this.height
    let canvas = document.createElement('canvas')
    let ctx = canvas.getContext('2d')
    if (Math.max(imgWidth, imgHeight) > w) {
      if (imgWidth > imgHeight) {
        canvas.width = w
        canvas.height = w * imgHeight / imgWidth
      } else {
        canvas.height = w
        canvas.width = w * imgWidth / imgHeight
      }
    } else {
      canvas.width = imgWidth
      canvas.height = imgHeight
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
    // 压缩语句
    // let base64 = canvas.toDataURL('image/jpeg', quality)
    // 如想确保图片压缩到自己想要的尺寸,500字符长度以下，请加以下语句, quality初始值根据情况自定
    let times = 0
    while (base64.length / 1024 > limit) {
      // quality -= 0.01
      base64 = canvas.toDataURL('image/jpeg', quality)
      // 限制3次,防止死循环
      if (times >= 3) {
        console.log('compress times >= 3, break')
        break
      }
      times = times + 1
    }
    // 回调函数返回，否则无法及时拿到该值
    callback(base64)
  }
}