跳至主要內容

JS - 二进制数据 Blob, ArrayBuffer与Buffer

Kamimika...大约 2 分钟JSJSNode.jsBlobArrayBufferBuffer笔记

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 --> BufferBuffer.from(str, "utf8")
  • ArrayBuffer --> BufferBuffer.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)

上次编辑于:
贡献者: wzh
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.4.1