一、啥是Base64编码

Base64编码是一种基于64个可打印字符来表示二进制数据的表示方法。它常用于在文本中表示二进制数据， 比方说在网页上嵌入图片时能将图片数据转换为Base64编码，直接嵌入到CSS或HTML中，而不需要额外的HTTP求来加载图片。

二、 图片Base64编码的优势

1. 少许些HTTP求

在网页中用Base64编码的图片能少许些对服务器的HTTP求，基本上原因是图片数据直接嵌入到CSS或HTML中，用户浏览网页时不需要 发送求来加载图片。

2. 避免跨域问题

当图片和HTML页面不在同一个域名下时会存在跨域问题。用Base64编码的图片，能将图片数据嵌入到HTML页面中，避免了跨域求，搞优良了页面的平安性。

3. 代码可读性

用Base64编码的图片， 能将图片数据直接嵌入到HTML或CSS中，简化了代码结构，搞优良了代码的可读性。

三、 图片Base64编码的不优良的地方

1. 许多些页面巨大细小

Base64编码的图片会相对于原图增差不许多1/3的巨大细小，这是基本上原因是Base64编码会许多些数据冗余，弄得页面巨大细小许多些，兴许会关系到页面加载速度。

2. 浏览器兼容性

有些矮小版本的浏览器兴许不支持Base64编码的图片，所以呢在用过程中需要考虑浏览器的兼容性问题。

四、 图片Base64编码的用场景

1. 细小图片

对于尺寸较细小的图片，将其转换为Base64编码并嵌入到网页中，能少许些HTTP求，搞优良页面加载速度。

2. 动态内容

对于动态内容中的图片， 将其转换为Base64编码，能避免因动态加载图片弄得的页面布局错乱问题。

3. 单页面应用

在单页面应用中， 用Base64编码的图片能少许些HTTP求，搞优良页面加载速度。

五、 图片Base64编码的转换方法

var img = new Image;
img.src = "图片地址";
img.onload = function {
    var canvas = document.createElement;
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext;
    ctx.drawImage;
    var dataURL = canvas.toDataURL;
    console.log;
};

图片Base64编码在网页设计中有着广泛的应用，它能少许些HTTP求，搞优良页面加载速度，但在用过程中需要注意其优不优良的地方，选择合适的场景进行用。

---