base64 在前端开发中的普遍使用。 本文将讨论 base64 编码的原理及其在前端项目中的实际应用。
base64编码的生成与数据传输和处理的需要有关，主要解决传输二进制数据时遇到的一些问题。 在网络通信的早期，许多传输协议，如电子邮件，只支持文本数据的传输。 二进制数据（例如，图像、音频等）不能直接在此协议中传输。
这就是 base64 诞生的地方，base64 编码的目的是将二进制数据转换为可打印的集合ascii用于在此协议中传输或存储的字符。
Base64 是基于 64 个可打印字符的二进制表示形式，每个单元每 6 位有一个可打印字符。 它主要使用6位字符来表示原始的8位字符。在 base64 中，可打印字符由以下部分组成：
a,b,c,d ..z大写字母 A、B、C、D...z小写字母 0,1,2,3 ...9阿拉伯数字加号特殊字符
除等号外，共 64 个字符作为后缀作为补充。
image-20231205151703402 从上面我们已经了解了什么是base64编码，我们来看看如何转换。 如下图所示，字符串man编码**。
image-20231205154643129，从中我们可以看到它由 3 个字符组成man编码转换后的结果为4个字符twfu显然，base64 编码的字符将比原来的 1 3 具有更多的字符。
我们上面看到的是，能被3整除的字节数换算成4个字符，如果是不能被3整除的字节数，结果是什么？让我们来分解一下。
image-20231205155916766编码的字节数不能被3整除，处理方法是用末尾的0字节值使其能被3整除，然后对base64进行编码。 A 字符的前 6 位可以作为 base64 字符使用，剩下的 2 个字节后面需要后跟 4 个 0 组成 6 位，作为第二个 base64 字符，第三和第四个 base64 字符没有内容，需要使用补充。
字符a编码为：qq==bc对应的编码为：qkm=
base64 的前端应用大多是针对 **， 一般都是基于 dataurl 使用的。
数据 URL bydata：前缀MIME 类型（指示数据类型）。Base64 标志（如果是文本，则可选）数据本身由四部分组成。 具体格式：data:base64],。这是第四部分数据本身是一个 base64 字符串。
function readasdataurl()
fd.onerror = reject;
@font-face {
font-family: 'customfont';
src: url(data:application/font-woff;base64,qknxd2vydhl1aw9hc...format('woff');
custom-font-example {
font-family: 'customfont', sans-serif;
.icon {
background-image: url('data:image/png;base64,qknxd2vydhl1aw9hc...');
width: 16px;
height: 16px;
display: inline-block;
文本表示：base64 编码将二进制数据转换为可打印数据ascii字符集，便于在文本环境中传输和存储，因为几乎所有系统都可以处理文本数据。 减少请求：如果它在html或css加工**，可减少http请求。 数据完整性：base64编码不改变数据内容，只进行编码，因此解码后可以完全恢复原始数据，而不会丢失信息。 URL 安全性：base64 编码通常用于 url 参数传递，因为它避免了某些特殊字符对 url 的影响。 增加数据的大小：编码后内容的体积变大，至少1 3，因为每个3 字节二进制数据被编码为4 个字符base64 字符串（仅当1 字节至少它会变成3 字节。导致数据膨胀。 可读性差：base64编码的字符串包含大量字符，降低了可读性和人类识别性。 不适用于大型二进制数据：对于较大的二进制数据（如大图像或**文件），base64编码的字符串长度会非常大，增加了数据传输和处理的负担。 从以上，我们了解了base64编码的原理及其在网络上的实际应用，通过文章的介绍，希望对大家的base64有更深入的了解。