img转换操作（base64、canvas、blob、file对象）

用这几个方法应该就差不多了：

// 根据地址（src）获取图片,生成img对象（标签）
function getImg(src) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = src
    // 源图片允许跨域，否则canvas转base64时，toDataURL会报错
    img.setAttribute('crossOrigin', 'anonymous')
    img.onload = function () {
      resolve(img)
    }
  })
}

// 绘制图片并将canvas转为base64 或blob
function canvas2Img(img) {
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height

  const ctx = canvas.getContext('2d')
  // 绘制原图（大小自己限制啦）
  ctx.drawImage(img, 0, 0)

  const base64 = canvas.toDataURL('image/png')
  /* 转为blob对象 toBlob方法第一个参数是回调函数，第二个是图片格式默认值image/png，第三个为图片质量 */
  // canvas.toBlob(blob => {
  //  console.log('blob:', blob)
  //  const url = URL.createObjectURL(blob)
  //  console.log('url:', url)
  //  URL.revokeObjectURL(url)
  // })
  canvas.remove()

  return base64
}

// base64转blob
function dataURItoBlob(base64) {
  let byteString
  const arr = base64.split(',')

  if (arr[0].indexOf('base64') !== -1) {
    // 转回字符串数据
    byteString = atob(arr[1])
  } else {
    // 没有base64标志，使用unescape解码回字符串数据
    byteString = unescape(arr[1])
  }

  // 获取文件格式
  const mimeString = arr[0].split(':')[1].split(';')[0]
  // 创建一个8位无符号整型数组，长度为字符数据长度
  const ia = new Uint8Array(byteString.length)
  for (let i = 0; i < byteString.length; i++) {
    // 存入ascii码
    ia[i] = byteString.charCodeAt(i)
  }

  return new Blob([ia], { type: mimeString })
}

// blob 转 file 一行代码就行了
function blobToFile(blob) {
  return new File([blob], '文件名.png', { type: blob.type })
}

// file 转 blob也是一行，毕竟file就是一种特殊的blob
function fileToBlob(file) {
  return new Blob([file], { type: file.type })
}

最后再加一个文件转base64的方法

// 文件转base64（file：用户选择的文件e.target.files[0]，或下载的blob对象）
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.readAsDataURL(file)
    fileReader.onload = function (e) {
      console.log('e.target.result:', e.target.result)
      resolve(e.target.result)
    }
  })
}