JS - 二进制数据 Blob, ArrayBuffer与Buffer
...大约 2 分钟
Blob
, Buffer
, ArrayBuffer
都是JS
中处理二进制数据的对象,常常需要互相转换,本文梳理了这多个对象的用途与关系
> Blob 对象
类文件对象
不可修改
本身含有类型信息(mediatype)
可处理大型二进制文件而无需载入内存
构造函数:new Blob([array], options)
const blob = new Blob([array], { type: [MIME类型] });
string
--> Blob
const blob = new Blob([str], { type: "text/plain" });
json
--> string
--> Blob
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj)], {
type: "application/json",
});
转换
Blob
--> string
:<Promise> Blob.text()
Blob
--> ArrayBuffer
:<Promise> blob.arrayBuffer()
Blob
--> BlobURL
:URL.createObjectURL(blob)
BlobURL 格式:blob:https://[域名]/[BlobID]
Blob
--> DataURL
(base64):FileReader
const blob = new Blob([binaryImage], { type: "image/png" });
const reader = new FileReader();
reader.onload = function (e) {
const imgElement = document.createElement("img");
imgElement.src = e.target.result;
document.body.appendChild(imgElement);
};
reader.readAsDataURL(blob);
> ArrayBuffer 对象
内存缓冲区对象
允许修改
本身不含有类型信息
可在内存检测器中查看
构造函数:new ArrayBuffer([字节数])
const arraybuffer = new ArrayBuffer(8);
读取、修改数据:TypeArray
const array = new Uint8Array(arraybuffer);
array[0] = 119;
console.log(array);
转换
ArrayBuffer
--> Blob
:new Blob(arraybuffer, {type: [MIME 类型]})
> Buffer 对象 (只存在于Node.js 环境)
允许修改
适合网络编程或文件系统操作
构造函数:Buffer.from(data)
string
-->Buffer
:Buffer.from(str, "utf8")
ArrayBuffer
-->Buffer
:Buffer.from(arrayBuffer[, ByteOffset[, length]])
文件读写中的运用
<Buffer> fs.readFileSync(path)
fs.writeFileSync(path, buffer)
转换
<Promise> blob.text():Buffer
--> string
<Promise> blob.arrayBuffer():Buffer
--> ArrayBuffer
> 另:Base64 的编码与解码
注意
string
中每个字符只能由一个字节表示,否则报错(如汉字、部分特殊符号)
string
--> base64 string
<string> btoa(string)
base64 string
--> string
<string> atob(string)
Powered by Waline v3.3.0