JS二进制读写基础是ArrayBuffer对象;Blob是JS的文件读取API的基础;Stream是JS的二进制推拉流API基础。这三个体系撑起了JS二进制相关。
太长不看版:看到二进制的东西大部分情况下想办法先转换成Blob对象、再转成DataURL、最后塞到img,audio,video等等元素的src就完事了。需要向后端上传时一般使用FormData对象
ArrayBuffer
ArrayBuffer对象代表的是一组只读的二进制数据。想要对这组数据进行操作需要将其转换为DataView或某种TypedArray。这里的转换意为标记二进制数据的读写方式,例如以IEEE754浮点数格式、有符号数、无符号数以及每一个数字所占的数据大小,具体可以参照TypedArray文档。
Blob
Blob对象代表的是一个抽象的类文件对象(类似文件的对象)。Input元素获得的File对象也是继承自Blob的。
Blob对象可以通过FileReader对象转换为DataURL(用于img、video和audio等元素的src属性以渲染)。
Blob对象可以直接转换为ArrayBuffer对象以对其进行二进制层面的编辑,也可以使用ArrayBuffer对象创建出对应的Blob对象以便于渲染。
Stream
ReadableStream对象代表的是一个可读的二进制流,WritableStream对象代表的是可写的二进制流。它们与内置的队列等机制共同构成了Stream API。ReadableStream可以通过Response对象转换为Blob和ArrayBuffer。Blob对象可以直接转换为ReadableStream对象,ArrayBuffer对象可以通过Blob对象转换为ReadableStream对象,也可以通过手动编写ReadableStream的初始化函数以自定义ArrayBuffer对象的推流机制。