Blob是一种不可变的类似文件对象的原始数据
相关知识
URL.createObjectURL()FileReaderArrayBuffer
介绍
- 在
fetch请求图片时，接触了response.blob()，将响应数据转化成Blob - 将其他非Blob对象和数据构造一个Blob,请使用构造函数
构造函数，属性，方法
构造函数
var aBlob = new Blob( array, options )
- 其中array可以是由
ArrayBuffer，ArrayBufferView，Blob，DOMString组成的数组 - options
- type,代表了将会被放入到blob中的数组内容的MIME类型
- ending,指定包含行结束符\n的字符串如何被写入
ArrayBuffer对象被用来表示一个通用的，固定长度的二进制数据缓冲区
属性
这两个属性，是 Blob 类的
- size
- type属性，一个字符串，表示该
Blob对象所包含数据的MIME类型。如果类型未知则为空字符串
方法
slice(start,end,contentType)
示例
// 使用字符串构建一个 blob
var debug = {hello: 'world'};
var blob = new Blob([JSON.stringify(debug,null,2)],{type:'application/json'});
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);
- 创建一个blob
- 使用
URL.createObjectURL()产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf的字符串，可以像普通URL那样使用它。比如在img.src上
从 Blob 中提取数据
从 Blob 对象中读取内容的唯一方法是
FileReader，文件读取对象定义有针对 Blob 的方法
- 通过其他方法可以把Blob读取为字符串或者data URL
// 第一步
var reader = new FileReader();
// 第三部
reader.addEventListener('loadend',function () {
// reader.result 将blob读取成一个`ArrayBuffer`
})
// 第二步
reader.readerAsArrayBuffer(blob);
总结
- blob可以在读取图片时使用，结合
URL.createObjectURL产生类似URL的地址，直接使用 - 使用
fileReader的方法，读取blob
