05Blob

Blob是一种不可变的类似文件对象的原始数据

相关知识

1. URL.createObjectURL()
2. FileReader
3. ArrayBuffer

介绍

1. 在fetch请求图片时，接触了response.blob()，将响应数据转化成Blob
2. 将其他非Blob对象和数据构造一个Blob,请使用构造函数

构造函数，属性，方法

构造函数

var aBlob = new Blob( array, options )

1. 其中array可以是由 ArrayBuffer，ArrayBufferView，Blob，DOMString组成的数组
2. options

• type,代表了将会被放入到blob中的数组内容的MIME类型
• ending,指定包含行结束符\n的字符串如何被写入

ArrayBuffer对象被用来表示一个通用的，固定长度的二进制数据缓冲区

属性

这两个属性，是 Blob 类的

1. size
2. type属性，一个字符串，表示该Blob对象所包含数据的MIME类型。如果类型未知则为空字符串

方法

1. slice(start,end,contentType)

示例

// 使用字符串构建一个 blob
var debug = {hello: 'world'};
var blob = new Blob([JSON.stringify(debug,null,2)],{type:'application/json'});

1. JSON.stringify(value,replacer,space)

• value一个有效的JSON字符串
• replacer用于转换结果的函数或者数组
• space ，为文本添加缩进。如果space是数字，将在每个级别的缩进指定数目的空格

// 使用Blob创建一个指向类型数组的URL
var typeArray = GetTheTypedArraySomehow();
var blob = new Blob([typeArray],{type:"application/octet-binary"});
var url = URL.createObjectURL(blob);

1. 创建一个blob
2. 使用URL.createObjectURL()产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf的字符串，可以像普通URL那样使用它。比如在img.src上

从 Blob 中提取数据

从 Blob 对象中读取内容的唯一方法是FileReader，文件读取对象定义有针对 Blob 的方法

1. 通过其他方法可以把Blob读取为字符串或者data URL

// 第一步
var reader = new FileReader();
// 第三部
reader.addEventListener('loadend',function () {
    // reader.result  将blob读取成一个`ArrayBuffer`
})
// 第二步
reader.readerAsArrayBuffer(blob);

总结

1. blob可以在读取图片时使用，结合URL.createObjectURL产生类似URL的地址，直接使用
2. 使用fileReader的方法，读取blob