fredafei/blogs

blogs's Issues

javaScript 二进制数据

Blob

• 创建const blob = new Blob(blobParts, options)
• 不可变，可使用slice读取blob 片段

Blob应用

• blob url，在<a>、<img>等的展示

const blobUrl = URL.createObjectURL(blob);
// do something
// ...
// 用完及时销毁
URL.revokeObjectURL(blobUrl)

• blob 转换为 base64

let reader = new FileReader();
reader.readAsDataURL(blob); // 将 Blob 转换为 base64 并调用 onload
reader.onload = function() {
  console.log(reader.result); // data url
  //...
};

注意：大的blob转base64后有性能和内存损耗。

ArrayBuffer

• 对固定长度的连续内存空间的引用
• 创建const buffer = new ArrayBuffer(16); // 创建一个长度为 16 的 buffer
• 不是数组类型，不能使用array[index]的方式
• 使用view 访问

ArrayBuffer 应用

• 文件创建、上传、下载和图像处理
• ArrayBuffer 转blob

const buffer = new ArrayBuffer(16);
// 将 buffer 视为一个 32 位整数的序列, 它存储了 4 个整数
const view = new Uint32Array(buffer);
view[0] = 123456; 
new Blob(view)

File 和 FileReader

• File 基于Blob扩展而来
• 创建new File(fileParts, fileName, [options])
• FileReader 是一个对象，读取File、Blob数据
• 除了使用FileReader，还可使用URL.createObjectURL(file)

File应用

• 上传文件XMLHttpRequest/fetch

注意事项

• 文件，流，buffer，最容易出现的问题就是越界，可通过比较长度发现问题。

参考资源

Blob MDN
File MDN
ArrayBuffer MDN
binary javascript.info