img转Base64

img转Base64

/**
 * img转Base64
 * @param imgFile {File} 图片文件
 * @param maxLen {Number} 目标大小
 * @returns {Promise<any>}
 */
function imgToBase64(imgFile, maxLen) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    // 读取客户端上的文件
    const reader = new FileReader()
    reader.onload = function() {
      // 读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
      const url = reader.result
      // reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
      img.src = url
    }
    img.onload = function() {
      // 生成比例
      const width = img.width
      const height = img.height
      // 计算缩放比例
      let rate = 1
      if (width >= height) {
        if (width > maxLen) {
          rate = maxLen / width
        }
      } else {
        if (height > maxLen) {
          rate = maxLen / height
        }
      }
      img.width = width * rate
      img.height = height * rate
      // 生成canvas
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, img.width, img.height)
      const base64 = canvas.toDataURL('image/jpeg', 0.9)
      resolve(base64)
    }
    reader.readAsDataURL(imgFile)
  })
}