场景一，项目assets资源里面的图片本地图片，重点如下

1. 需要了解 canvas的基本操作，canvas.toDataURL 方法

   HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为 96dpi。

2. 需要用 require('@/assets/xxx.png') 引入图片，不能直接写 【'@/assets/xxx.png'】这个字符串
3. 仅可以转换图片类型的数据

function imgToBase64(url) {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 base64;};
},// 引入项目中的图片
const imgUrl = require('xxx.png');
const res = imgToBase64(imgUrl);
console.log('生成的base64图片', res)

场景二，有一个公开的url，比如https//xx.png 或者项目public目录下的图片，重点如下

1. 使用 ajax + FileReader
2. ajax 异步请求使用XMLHttpRequest、fetch、axios都可以 
3. 需要将请求的返回格式 responseType 转成 Blob 格式
4. 这种方法也适用于文件转成 base64

 getBase64(imgUrl) {let xhr = new XMLHttpRequest();xhr.open('get', '/xxx.jpg', true);// 重点1xhr.responseType = 'blob';xhr.onload = function() {if (this.status == 200) {//得到一个blob对象let blob = this.response;// 重点2let 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) {var xhr = new XMLHttpRequest();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】的方法。

Data URL，即前缀为 data: 协议的 URL，其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URI”，直到这个名字被 WHATWG 弃用。

bae64的图片/文字就是一种Data URL

请看官方文档

Data URL - HTTP | MDNData URL，即前缀为 data: 协议的 URL，其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URI”，直到这个名字被 WHATWG 弃用。https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs