一、FileReader API
1. FileReader 简介
在支持 FileReader API 的浏览器中，我们也可以利用该 API 方便实现图片本地预览功能。
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
注：FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。
要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。
2. 本地图片预览相关API
关于FileReader的API在此不详细介绍，可以查阅MDN文档。
下面直接用实例代码来看一下如何利用他来实现图片本地预览。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片本地预览示例</title>
</head>
<body>
<h3>图片本地预览示例</h3>
<input type="file" accept="image/*" onchange="loadFile(event)" />
<br>
<img id="img-preview" style="width:400px" />
<script>
const loadFile = function (event) {
const reader = new FileReader();
reader.onload = function () {
const output = document.querySelector("#img-preview");
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
</body>
</html>
代码中为文件输入框元素绑定onchange事件，事件处理函数中创建 FileReader对象，并为该对象绑定 onload 相应的事件处理函数，然后调用FileReader对象的 readAsDataURL()方法，将本地图片对应的File对象转换为Data URL。
当文件读取完后触发绑定的onload事件处理函数，在这里将读取结果FileReader.result赋值给img元素的src属性，从而实现本地图片预览。
其实对于 FileReader 对象来说，除了支持把 File/Blob 对象转换为 Data URL 之外，它还提供了 readAsArrayBuffer() 和 readAsText() 方法，用于把 File/Blob 对象转换为其它的数据格式。
3. Data URL
下图中在浏览器控制台中打印了由readAsDataURL方法转换得到的Data URL
data:[<mediatype>][;base64],<data>
Data URL由四个部分组成：
- 前缀（
data:） - 指示数据类型的 MIME 类型，比如 “image/png” 表示 PNG 图像文件，如果被省略，则默认值为
text/plain;charset=US-ASCII - 如果非文本则为可选的 base64 标记
- 数据本身：如果数据是文本类型，可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。如果是二进制数据，可以将数据进行 base64 编码之后再进行嵌入。
MIME（Multipurpose Internet Mail Extensions）多用途互联网邮件扩展类型，是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
常见的 MIME 类型有：超文本标记语言文本 .html text/html、PNG 图像 .png image/png、普通文本 .txt text/plain 等。
在 Web 项目开发过程中，为了减少 HTTP 请求的数量，对应一些较小的图标，我们通常会考虑使用 Data URL 的形式内嵌到 HTML 或 CSS 文件中。 但需要注意的是：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为该图片经过 base64 编码后的字符串非常大，会明显增大 HTML 页面的大小，从而影响加载速度。
在 Data URL 中，数据是很重要的一部分，它使用 base64 编码的字符串来表示。因此要掌握 Data URL，我们还得了解一下 Base64。
二、base64
Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。由于 「2⁶ = 64」,所以每 6 个比特为一个单元，对应某个可打印字符。3 个字节有 24 个比特，对应于 4 个 base64 单元，即 3 个字节可由 4 个可打印字符来表示。相应的转换过程如下图所示
Base64 常用于在处理文本数据的场合，表示、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据。
在 MIME 格式的电子邮件中，base64 可以用来将二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时，在传输编码方式中指定 base64。使用的字符包括大小写拉丁字母各 26 个、数字 10 个、加号 + 和斜杠 /，共 64 个字符，等号 = 用来作为后缀用途。
Base64 相应的索引表如下：
了解完上述的知识，我们以编码 Man 为例，来直观的感受一下编码过程。Man 由 M、a 和 n 这 3 个字符组成，它们对应的 ASCII 码为 77、97 和 110。
接着我们以每 6 个比特为一个单元，进行 base64 编码操作，具体如下图所示：
由图可知，Man （3 字节）编码的结果为 TWFu（4 字节），很明显经过 base64 编码后体积会增加 1/3。Man 这个字符串的长度刚好是 3，我们可以用 4 个 base64 单元来表示。但如果待编码的字符串长度不是 3 的整数倍时，应该如何处理呢？
「如果要编码的字节数不能被 3 整除，最后会多出 1 个或 2 个字节，那么可以使用下面的方法进行处理：先使用 0 字节值在末尾补足，使其能够被 3 整除，然后再进行 base64 的编码。」
以编码字符 A 为例，其所占的字节数为 1，不能被 3 整除，需要补 2 个字节，具体如下图所示：
由上图可知，字符 A 经过 base64 编码后的结果是 QQ==，该结果后面的两个 = 代表补足的字节数。而最后个 1 个 base64 字节块有 4 位是 0 值。
接着我们来看另一个示例，假设需编码的字符串为 BC，其所占字节数为 2，不能被 3 整除，需要补 1 个字节，具体如下图所示：
由上图可知，字符串 BC 经过 base64 编码后的结果是 QkM=，该结果后面的 1 个 = 代表补足的字节数。而最后个 1 个 base64 字节块有 2 位是 0 值。
在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串：
- btoa()：该函数能够基于二进制数据 “字符串” 创建一个 base64 编码的 ASCII 字符串。示例如下：
const name = 'Keen'; const encodedName = btoa(name); console.log(encodedName); // S2Vlbg== - atob()： 该函数能够解码通过 base64 编码的字符串数据。
const encodedName = 'S2Vlbg=='; const name = atob(encodedName); console.log(name); // Keen
对于 atob 和 btoa 这两个方法来说，其中的 a 代表 ASCII，而 b 代表 Blob，即二进制。因此 atob 表示 ASCII 到二进制，对应的是解码操作。而 btoa 表示二进制到 ASCII，对应的是编码操作。
需要注意的是 base64 只是一种数据编码方式，目的是为了保障数据的安全传输。但标准的 base64 编码无需额外的信息，即可以进行解码，是完全可逆的。因此在涉及传输私密数据时，并不能直接使用 base64 编码，而是要使用专门的对称或非对称加密算法。
参考原文： [1.3万字] 玩转前端二进制
扫一扫
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
