一、什么是Base64编码
Base64是一种数据编码方式，通过将数据翻译成一串只包含64个字符的字符集来表示二进制数据的方法。Base64中的64个字符包括大小写字母、数字和'+/'两个特殊字符，这些字符在不同的编码方式下所代表的数值也不同。在Base64中，每6个比特位被转换成一个字符，因此在Base64编码产生的文本中，字符的个数是原来的33%。
二、在线base64图片的原理
在将图片转换成base64编码的过程中，图片被读取为二进制数据，并将该二进制数据块分割成6个比特位的块。每个6比特位组成一个编码字节，对应64个编码字符的下标，从字符集中提取相应的字符。最终形成一个Base64编码过的字符串。
三、在线base64图片的优点
在线base64图片可以通过该方式将图片数据直接嵌入到HTML或CSS文件中，而无需通过HTTP请求来获取图片。这些编码的图片通常用于网页设计、电子邮件的传输等场景，减少了图片载入等待的时间。此外，由于Base64编码使用的字符集较少，编码后的字符串可读性较高，便于传输。
四、在线base64图片的缺点
Base64编码会将数据块大小增加约33%，因此将大量的图片数据转换成Base64可能导致文件大小急剧增加，从而增加文件的下载时间。此外，Base64编码使用的字符集较少，导致需要更多的编码字符来表示同等大小的二进制数据，进一步增加了Base64编码后的字符串长度。
五、如何在网页中嵌入Base64图片
要在网页中嵌入Base64图片，可以使用标签，并将src属性设置为"data:image/png;base64,iVBORw0KG...”格式。其中"data:image/png;base64"部分为图片的MIME类型，后面紧跟着Base64编码字符串。例如，以下代码将MIME类型为png的图片转换为Base64编码，并将其作为image元素的src属性：
<img src='data:image/png;base64,iVBORw0KG...'>
六、如何将图片转换成Base64编码字符串
下面是一个使用JavaScript将图片转换成Base64编码字符串的代码示例。其中，我们可以使用FileReader API读取文件，并将结果传递给base64 encode函数来进行编码。
function toBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = reject
});
}
七、如何从Base64编码字符串中获取原始数据
使用JavaScript将Base64编码字符串转换成原始数据通常需要使用atob()函数。该函数接受一个Base64编码字符串，返回原始二进制数据。
const base64Str = "iVBORw0KG..."; const binaryStr = atob(base64Str);
八、常见的使用场景
在线Base64图片通常应用于一些小图标、图片等，这些图片比较小，而且使用次数较少，可用于推广营销，微信公众号图文消息等场合；此外，如果在一些不方便直接挂载图片的平台如邮件、蓝牙传输时就可以使用。
