场景一，项目assets资源里面的图片本地图片，重点如下
需要了解 canvas的基本操作，canvas.toDataURL 方法
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为 96dpi。

【webapck+vue项目】需要用 require('@/assets/xxx.png') 引入图片，不能直接写 【'@/assets/xxx.png'】这个字符串
【vite+vue项目】需要使用import xxx from 'xxx.png'引入图片
仅可以转换图片类型的数据
// 注意图片的，onload是异步的，如果要封装成工具函数，需要用promise包装一下
async function imgToBase64(url) {
return new Promise((resolve, reject) => {
 const image = new Image()
 image.src = url
 image.onload = () => {
  const canvas = document.createElement('canvas')
  canvas.width = image.naturalWidth // 使用 naturalWidth 为了保证图片的清晰度
  canvas.height = image.naturalHeight
  canvas.style.width = `${canvas.width / window.devicePixelRatio}px`
  canvas.style.height = `${canvas.height / window.devicePixelRatio}px`
  const ctx = canvas.getContext('2d')
  if (!ctx) {
   return null
  }
  ctx.drawImage(image, 0, 0)
  const base64 = canvas.toDataURL('image/png')
  return resolve(base64)
 }
 image.onerror = (err) => {
  return reject(err);
 }
})
}

// 引入项目中的图片
const imgUrl = require('xxx.png');
imgToBase64(imgUrl).then(res => {
   if(res) {
       console.log('生成的base64图片', res)
   }
}).catch(err => {
console.log('这里是错误', err);
});

场景二，有一个公开的url，比如https//xx.png 或者项目public目录下的图片，重点如下
使用 ajax + FileReader
ajax 异步请求使用XMLHttpRequest、fetch、axios都可以 
需要将请求的返回格式 responseType 转成 Blob 格式
这种方法也适用于文件转成 base64
getBase64(imgUrl) {
    let xhr = new XMLHttpRequest();
    xhr.open('get', '/xxx.jpg', true);
    // 重点1
    xhr.responseType = 'blob';
    xhr.onload = function() {
        if (this.status == 200) {
             //得到一个blob对象
             let blob = this.response;
             // 重点2
             let oFileReader = new FileReader();
             oFileReader.onloadend = function(e) {
                 // 结果
                 const base64 = e.target.result
             };
             oFileReader.readAsDataURL(blob);
        }
    };
    xhr.send();
},
使用 fetch api请求，大同小异，重点都是 responseType 要设置为blob，再使用 FileReader 的 readAsDataURL 方法把  blob 转成 base64

function getBase64(imgUrl) {
  fetch(imgUrl, {
       responseType: 'blob'
  })
   .then(response => {
       return response.blob();
   })
   .then(blob => {
       let oFileReader = new FileReader();
       oFileReader.onloadend = function(e) {
           // base64结果
           const base64 = e.target.result
       };
       oFileReader.readAsDataURL(blob);
   });
},
重点提示
发现没有？方法一是用的 HTMLCanvasElement.toDataURL()  和 方法二是用的 FileReader.readAsDataURL() 都有一个【DataURL】，这就说明这个【dataURL】是和base64有关系的，所以，以后无论是文件，还是图片转成base64都需要先想到带有【dataURL】的方法。