base64 、file、远程图片地址的转换

公司业务需求，需要多次来回处理图片，以下是总结的方法：

远程图片地址转为base64

/**
   * 远程图片转为base64
   * @param  {string} path 图片地址
   * @return {string} base64
   */
  const convertUrlToBase64 = (path: string): Promise<string> => {
    if (!path || typeof path !== 'string') {
      throw new Error('无效的URL')
    }
    return new Promise((resolve, reject) => {
      const canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image()
      img.src = path
      img.onload = () => {
        const width = img.width,
          height = img.height * (width / img.width) // 计算高度缩放比例
        canvas.width = width
        canvas.height = height
        ctx.drawImage(img, 0, 0, width, height)
        const base64 = canvas.toDataURL()
        resolve(base64)
      }

      img.onerror = () => {
        reject(new Error('图片加载失败'))
      }
    })
  }

将base64编码的字符串转换为Blob对象。

  /**
   *  将base64编码的字符串转换为Blob对象。
   * @param {string} byteCharacters base64编码的字符串。
   * @return {Blob} Blob
   */
  const convertBase64ToBlob = (byteCharacters) => {
    const encoder = new TextEncoder()
    const bytes = encoder.encode(byteCharacters)
    return new Blob([bytes], { type: 'image/jpeg' })
  }

 将file文件转换为Base64

  /**
   * 将file文件转为base64
   * @param {File} file 文件对象
   * @returns { string } base64
   */
  const convertFileToBase64 = (file: File) => {
    // 输入验证
    if (!file || !(file instanceof File)) {
      return Promise.reject('file必须是一个有效的file对象。')
    }
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onload = (e) => {
        resolve(e.target.result)
      }
      // 错误处理
      reader.onerror = (errorEvent) => {
        reject(`读取文件时发生错误:${errorEvent.target.error.message}`)
      }
      reader.readAsDataURL(file)
    })
  }