作者:全栈成长之路公号 / 山月行
作为一名前端,在工作中也会遇到很多有关二进制处理的需求,如 EXCEL 表格的导出,PDF 的生成,多个文件的打包,音频的处理。
从前后端整体上来说前端代表 UI 层,它的外在表现是human readable的,而服务端代表数据层,所表现出来的是machine readable。如果 EXCEL 以及 PDF 的处理交由服务端处理,服务端免不了要做一层格式化的逻辑处理,以便与前端保持一致。一来增加了复杂度,二来容易造成前端与服务器端的数据不一致。此时为了减少复杂度,工作量有可能都尽可能在浏览器端完成。
本篇文章总结了浏览器端的二进制以及有关数据之间的转化,如ArrayBuffer,TypedArray,Blob,DataURL,ObjectURL,Text之间的互相转换。为了更好的理解与方便以后的查询,特意做了一张图做总结。
二进制相互转换图
二进制相关数据类型
在介绍常见的二进制数据处理之前,先简单介绍下几种二进制相关的数据类型
ArrayBuffer && TypedArray
TypedArray是 ES6+ 新增的描述二进制数据的类数组数据结构。但它本身不可以被实例化,甚至无法访问,你可以把它理解为Abstract Class或者Interface。而基于TypedArray,有如下数据类型:
Uint8ArrayUint及Unsigned Int代表数组的每一项是无符号整型8代表数据的每一项占 8 个比特位,即一个字节
Int8Array
Uint16Array
Int16Array
...
通过Uint8Array,即可知道Uint16Array,Int8Array所代表的意义。
constarray=newInt32Array([1,2,3])
//.length代表数组的大小
//3
array.length
//.btyeLength代表数据所占字节大小
//12
array.byteLength
ArrayBuffer代表二进制数据结构,「并且只读」,需要转化为TypedArray进行写操作。
constarray=newInt16Array([1,2,3])
//TypedArray->ArrayBuffer
array.buffer
//ArrayBuffer->TypedArray
newInt16Array(array.buffer)
//buffer.length代表数据所占用字节大小
array.buffer.length===array.byteLength
连接多个 TypedArray
TypedArray没有像数组那样的Array.prototype.concat方法用来连接多个TypedArray。不过它提供了TypedArray.prototype.set可以用来间接连接字符串
❝可以参考 MDN 文档:/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set
❞
//在位移offset位置放置typedarray
typedarray.set(typedarray,offset)
原理就是先分配一块空间足以容纳需要连接的TypedArray,然后逐一在对应位置叠加
functionconcatenate(constructor,...arrays){
letlength=0;
for(letarrofarrays){
length+=arr.length;
}
letresult=newconstructor(length);
letoffset=0;
for(letarrofarrays){
result.set(arr,offset);
offset+=arr.length;
}
returnresult;
}
concatenate(Uint8Array,newUint8Array([1,2,3]),newUint8Array([4,5,6]))
同时您还需要对资源的获取有大致的了解,如 XHR,fetch,通过文件上传。
Blob
Blob是浏览器端的类文件对象。操作Blob需要使用数据类型FileReader。
FileReader有以下方法,可以把Blob转化为其它数据
FileReader.prototype.readAsArrayBuffer
FileReader.prototype.readAsText
FileReader.prototype.readAsDataURL
FileReader.prototype.readAsBinaryString
constblob=newBlob('hello'.split(''))
//表示文件的大小
blob.size
constarray=newUint8Array([128,128,128])
constblob2=newBlob([array])
functionreadBlob(blob,type){
returnnewPromise(resolve=>{
constreader=newFileReader()
reader.onload=function(e){
resolve(e.target.result)
}
reader.readAsArrayBuffer(blob)
})
}
readBlob(blob,'DataURL').then(url=>console.log(url))
数据输入
数据输入或者叫资源的请求可以分为以下两种途径
通过 url 地址请求网络资源
通过文件上传请求本地资源
fetch
fetch应该是大家比较熟悉的,但大多使用环境比较单一,一般用来请求 json 数据。其实,「它也可以设置返回数据格式为Blob或者ArrayBuffer。」
fetch返回一个包含Response对象的 Promise,Response有以下方法
Response.prototype.arrayBuffer
Response.prototype.blob
Response.prototype.text
Response.prototype.json
❝详情可以查看 MDN 文档 /en-US/docs/Web/API/Response
❞
fetch('/api/ping').then(res=>{
//true
console.log(resinstanceofResponse)
//最常见的使用
returnres.json()
//返回Blob
//returnres.blob()
//返回ArrayBuffer
//returnres.arrayBuffer()
})
另外,万能的Response API既可以可以使用TypedArray,Blob,Text作为输入,又可以使用它们作为输出。
「这意味着关于这三种数据类型的转换完全可以通过 Response」
xhr
「xhr 可以设置 responseType 接收合适的数据类型」
constrequest=newXMLHttpRequest()
request.responseType='arraybuffer'
request.responseType='blob'
File
本地文件可以通过input[type=file]来上传文件。
当上传成功后,可以通过document.getElementById('input').files[0]获取到上传的文件,即一个 File 对象,它是 Blob 的子类,可以通过FileReader或者Response获取文件内容。
数据输出
或者叫数据展示或者下载,数据经二进制处理后可以由 url 表示,然后通过 image, video 等元素引用或者直接下载。
Data URL
Data URL 即 Data As URL。所以,「如果资源过大,地址便会很长。」使用以下形式表示。
data:[][;base64],
先来一个 hello, world。把以下地址粘入地址栏,会访问到 hello, world
data:text/html,
Hello%2C%20World!
Base64 编码与解码
Base64 使用大小写字母,数字,+ 和 / 64 个字符来编码数据,所以称为 Base64。经编码后,文本体积会变大 1/3
在浏览器中,可以使用atob和btoa编码解码数据。
//aGVsbG8=
btoa('hello')
Object URL
可以使用浏览器新的 APIURL对象生成一个地址来表示Blob数据。
//粘贴生成的地址,可以访问到hello,world
//blob:http://host/27254c37-db7a-4f2f-8861-0cf9aec89a64
URL.createObjectURL(newBlob('hello,world'.split('')))
下载
data:application/octet-stream;base64,5bGx5pyI
资源的下载可以利用 FileSaver[1]。
这里也简单写一个函数,用来下载一个链接
functiondownload(url,name){
consta=document.createElement('a')
a.download=name
a.rel='noopener'
a.href=url
//触发模拟点击
a.dispatchEvent(newMouseEvent('click'))
//或者a.click(
}
二进制数据转换
二进制数据转换
以上是二进制数据间的转换图,有一些转换可以直接通过 API,有些则需要代码,以下贴几种常见转换的代码
String to TypedArray
根据上图,由字符串到 TypedArray 的转换,可以通过「String -> Blob -> ArrayBuffer -> TypedArray」的途径。
关于代码中的函数readBlob可以回翻环节 数据类型 - Blob[2]
constname='山月'
constblob=newBlob(name.split(''))
readBlob(blob,'ArrayBuffer').then(buffer=>newUint8Array(buffer))
也可以通过 Response API 直接转换「String -> ArrayBuffer -> TypedArray」
constname='山月'
newResponse(name).arrayBuffer(buffer=>newUint8Array(buffer))
这上边两种方法都是直接通过 API 来转化,如果你更像了解如何手动转换一个字符串和二进制的 TypedArray
String to TypedArray 2
使用 enodeURIComponent 把字符串转化为 utf8,再进行构造 TypedArray。
functionstringToTypedArray(s){
conststr=encodeURIComponent(s)
constbinstr=str.replace(/%([0-9A-F]{2})/g,(_,p1)=>{
returnString.fromCharCode('0x'+p1)
})
returnnewUint8Array(binstr.split('').map(x=>x.charCodeAt(0)))
}
实践
1. 如何上传本地图片并在网页上展示
由以上整理的转换图得出途径
本地上传图片 -> Blob -> Object URL
2. 如何拼接两个音频文件
由以上整理的转换图得出途径
fetch请求音频资源 -> ArrayBuffer -> TypedArray -> 拼接成一个 TypedArray -> ArrayBuffer -> Blob -> Object URL
3. 如何把 json 数据转化为 demo.json 并下载文件
json 视为字符串,由以上整理的转换图得出途径
Text -> DataURL
除了使用 DataURL,还可以转化为 Object URL 进行下载。关于下载的函数download,可以参考以上环节 数据输出-下载[3]
Text -> Blob -> Object URL
可以把以下代码直接粘贴到控制台下载文件
constjson={
a:3,
b:4,
c:5
}
conststr=JSON.stringify(json,null,2)
//方案一:Text -> DataURL
constdataUrl=`data:,${str}`
download(dataUrl,'demo.json')
//方案二:Text -> Blob -> ObjectURL
consturl=URL.createObjectURL(newBlob(str.split('')))
download(url,'demo1.json')