js实现base64格式编码图片（通俗，易懂）

场景一：项目assets资源里面的图片本地图片

//项目本地assets资源得本地图片
function imgToBase64(url) {
    
    
  const image = new Image();//创建一个图像对象
  image.src = url;//在IE游览器src不能在onload事件得前面
  image.onlood = () => {
    
    
    //当image加载完毕后执行得事件
    const convas = document.createElement('canvas');
    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;
    //naturalHeight是元素的自然宽度，它永远不会改变。例如，即使使用 CSS 或 JavaScript 
    //调整图像大小，100px 宽的图像的自然宽度始终为 100px。
    canvas.style.width = `${
      
      convas.width / window.devicePixelRatio}px`;//window.devicePixelRatio是设备像素比
    canvas.style.height = `${
      
      convas.height / window.devicePixelRatio}px`;
    const ctx = canvas.getContext('2d')
    //Canvas 自身无法绘制任何内容。Canvas 的绘图是使用 JavaScript 操作的。Context 对象就是 JavaScript 操作 Canvas 的接口。
    //使用[CanvasElement].getContext('2d')来获取 2D 绘图上下文
    if(!ctx){
    
    
      return null;
    }
    ctx.drawImage(image,0,0);
    const base64 = canvas.toDataURL('image/png');
    //canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。
    //可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
    return base64;
  }
}
//引入项目图片
const imgUrl = require('./images/error.png');
const res = imgToBase64(imgUrl);
console.log('生成base64的图片',res)

场景二：有一个公开的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) {
    
    
   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);
    });
},