Base64转换成图片

一、Base64简介

Base64是一种将二进制数据转换为ASCII字符的编码方式。这个编码方式由美国在线公司开发，在电子邮件中广泛使用，因为很多邮件系统只支持ASCII字符。

Base64可以将任意长度的二进制数据编码成纯文本，只包含大小写字母、数字、"+"、"/"、"="等字符，不包含其他特殊字符。因此可以通过邮件等传递文本方式发送二进制数据。

例如，将字符串"hello"用Base64编码后得到的字符串为"aGVsbG8="。通过Base64编码可以将二进制文件转换为可以直接嵌入到HTML、CSS中的文本格式。其中应用最广泛的即为将图片文件转换为Base64编码的方式。

二、将图片转换为Base64编码

将图片转换成Base64编码非常简单，只需调用HTML5中提供的FileReader类，使用readAsDataURL()方法读取图片数据，并将其转化为Base64格式。

function readPicture(file){
  let reader = new FileReader();
  reader.onload = function(event){
    let base64String = event.target.result;
    console.log(base64String);
  }
  reader.readAsDataURL(file);
}

调用readPicture()方法，传入一个图片文件即可将图片转换为Base64编码格式。

三、将Base64编码转换为图片

将Base64编码转换为图片同样非常简单，只需要创建一个Image对象，并将Base64编码赋值给其src属性即可。以下是一个示例代码:

let img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA......';
document.body.appendChild(img);

以上代码可将Base64编码的图片添加到当前页面。

四、Base64编码优缺点

将图片转换为Base64编码，可以将图片直接插入HTML代码中，使得图片显示的更为方便，而且在某些场景中避免了HTTP的请求延迟。但同时也有以下缺点：

• Base64编码会使图片文件增大33%，在一些网络流量比较宝贵的场景有可能会影响用户体验。
• Base64编码的图片无法进行缓存，每次页面加载都要重新加载图片，而且在图片较多的情况下对性能也会有影响。
• Base64编码的字符串太长，在嵌入HTML页面或传输过程中，可能会导致数据传输时间变长。

因此，对于需要传输或者特别关注性能的应用，建议使用图片URL或者雪碧图等方式进行优化处理。