Blob是一种不可变的类似文件对象的原始数据
相关知识
URL.createObjectURL()
FileReader
ArrayBuffer
介绍
- 在
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
网友评论