背景：学习记录

Blob

Blob全称为binary large object，即二进制大对象。blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。Blob对象一个不可修改，从Blob中读取内容的唯一方法是使用FileReader。

File

File对象是特殊类型的Blob，
在JavaScript中，主要有两种方法来获取File对象：

1. <input>元素上选择文件后返回的FileList对象；
2. 文件拖放操作生成的DataTransfer对象；

FileReader

通过上面我们知道了blob是不可修改也是无法读取里面的内容的。无法读取里面的内容肯定是不可行的。所以FileReader就提供了读取blob里面内容的方法。

FileReader对象提供了以下方法来加载文件：

• FileReader.readAsArrayBuffer()：读取指定Blob中的内容，完成之后，result属性中保存的将是被读取文件的ArrayBuffer数据对象；
• FileReader.readAsBinaryString()：读取指定Blob中的内容，完成之后，result属性中将包含所读取文件的原始二进制数据；
• FileReader.readAsDataURL()：读取指定Blob中的内容，完成之后，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
• FileReader.readAsText()：读取指定Blob中的内容，完成之后，result属性中将包含一个字符串以表示所读取的文件内容。

ArrayBuffer

我们可以把它理解为特殊的数组，特殊在哪里呢？ ArrayBuffer本身就是一个黑盒，不能直接读写所存储的数据，需要借助以下视图对象来读写

TypedArray只是一个概念，实际使用的是那9个对象

TypedArray视图和DataView视图的区别主要是字节序，前者的数组成员都是同一个数据类型，后者的数组成员可以是不同的数据类型。

Object URL

他是一个用来表示File Object和Blob Object的URL

演示一下：

Base64

在JavaScript中，有两个函数被分别用来处理解码和编码base64字符串：

• atob()：解码，解码一个Base64字符串；
• btoa()：编码，从一个字符串或者二进制数据编码一个Base64字符串。

主要使用：

1. 将canvas画布内容生成base64的图片
2. 将获取的图片文件，生成base64图片【这个在上面的filereader的时候已经演示过了，这里就不演示了】

总结：

1. ArrayBuffer与Blob有啥区别呢？根据ArrayBuffer和Blob的特性，Blob作为一个整体文件，适用于传输；当需要对二进制数据进行操作时（比如修改某一段数据时），就可以使用ArrayBuffer。
2. 通过ArrayBuffer创建Blob，然后通过FileReader读取里面的内容