作为一名前端,在工作中也会遇到很多有关二进制处理的需求,如 EXCEL 表格的导出,PDF 的生成,多个文件的打包,音频的处理。
从前后端整体上来说前端代表 UI 层,它的外在表现是 human readable 的,而服务端代表数据层,所表现出来的是 machine readable 。如果 EXCEL 以及 PDF 的处理交由服务端处理,服务端免不了要做一层格式化的逻辑处理,以便与前端保持一致。一来增加了复杂度,二来容易造成前端与服务器端的数据不一致。此时为了减少复杂度,工作量有可能都尽可能在浏览器端完成。
本篇文章总结了浏览器端的二进制以及有关数据之间的转化,如 ArrayBuffer , TypedArray , Blob , DataURL , ObjectURL , Text 之间的互相转换。为了更好的理解与方便以后的查询,特意做了一张图做总结。
二进制相关数据类型
在介绍常见的二进制数据处理之前,先简单介绍下几种二进制相关的数据类型
ArrayBuffer && TypedArray
TypedArray 是 ES6+ 新增的描述二进制数据的类数组数据结构。但它本身不可以被实例化,甚至无法访问,你可以把它理解为 Abstract Class 或者 Interface 。而基于 TypedArray ,有如下数据类型:
Uint8Array
Uint
Unsigned Int
8
Int8Array
Uint16Array
Int16Array
…
通过 Uint8Array ,即可知道 Uint16Array , Int8Array 所代表的意义。
const array = new Int32Array([1, 2, 3])
// .length 代表数组的大小
// 3
array.length
// .btyeLength 代表数据所占字节大小
// 12
array.byteLength
ArrayBuffer 代表二进制数据结构, 「并且只读」 ,需要转化为 TypedArray 进行写操作。
const array = new Int16Array([1, 2, 3])
// TypedArray -> ArrayBuffer
array.buffer
// ArrayBuffer -> TypedArray
new Int16Array(array.buffer)
// buffer.length 代表数据所占用字节大小
array.buffer.length === array.byteLength
连接多个 TypedArray
TypedArray 没有像数组那样