blob 图片_《你不知道的 Blob》番外篇

学习时间：2020.06.06

学习章节：《你不知道的 Blob》

原文对 Blob 的知识点介绍得非常完整清晰，本文通过四个问题来总结本文核心知识：

1. Blob 是什么？
2. Blob 怎么用？
3. Blob 有哪些使用场景？
4. Blob 与 ArrayBuffer 有何区别？

一、Blob 是什么？

Blob(Binary Large Object)表示二进制类型的大对象，通常是影像、声音或多媒体文件。MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。在 JavaScript 中 Blob 对象表示一个不可变、原始数据的类文件对象，它不一定非得是大量数据，也可以表示一个小型文件的内容。另外，JavaScript 中的 File 接口是基于 Blob，继承 Blob 的功能并将其扩展使其支持用户系统上的文件。

二、Blob 怎么用？

Blob 由一个可选字符串 type 和 blobParts 组成，其中， type 通常为 MIME 类型。

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型，常见有：超文本标记语言文本 .html text/html 、PNG图像 .png image/png 、普通文本 .txt text/plain 等。

1. 构造函数

Blob 构造函数语法为：

const myBlob = new Blob(blobParts[, options])

入参：

• blobParts：它是一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象构成的数组。DOMStrings 会被编码为 UTF-8。
• options ：一个可选的对象，包含以下两个属性： type ：默认值为 "" ，表示将会被放入到 blob 中的数组内容的 MIME 类型。endings ：默认值为 "transparent"，用于指定包含行结束符 的字符串如何被写入。它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持 blob 中保存的结束符不变。

出参：返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

2. 属性和方法

2.1 属性介绍

Blob 对象拥有 2 个属性：

• size ：只读，表示 Blob 对象中所包含的数据大小(以字节为单位)；
• type ：只读，值为字符串，表示该 Blob 对象所包含数据的 MIME 类型。若类型未知，则该属性值为空字符串。

2.2 方法介绍

• slice([start[, end[, contentType]]]) ：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
• stream()：返回一个能读取 Blob 内容的 ReadableStream 。
• text()：返回一个 Promise 对象且包含 Blob 所有内容的 UTF-8 格式的 USVString 。
• arrayBuffer()：返回一个 Promise 对象且包含 Blob 所有内容的二进制格式的 ArrayBuffer 。

注意：** Blob 对象是不可改变的**，但是可以进行分割，并创建出新的 Blob 对象，将它们混合到一个新的 Blob 中。类似于 JavaScript 字符串：我们无法更改字符串中的字符，但可以创建新的更正后的字符串。

3. 简单上手

3.1 示例1：从字符串创建 Blob

let myBlobParts = ['

Hello Leo

']; // 一个包含DOMString的数组let myBlob = new Blob(myBlobParts, {type : 'text/html', endings: "transparent"}); // 得到 blobconsole.log(myBlob.size + " bytes size");// Output: 31 bytes sizeconsole.log(myBlob.type + " is the type");// Output: text/html is the type

3.2 示例2：从类型化数组和字符串创建 Blob

JavaScript类型化数组是一种类似数组的对象，并提供了一种用于 访问原始二进制数据的机制 。并且在类型数组上调用 Array.isArray() 会返回 false 。详细可参考MDN《JavaScript 类型化数组》章节。

let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二进制格式的 "hello"let blob = new Blob([hello, ' ', 'leo'], {type: 'text/plain'});// Output: "Hello leo"

3.3 示例3：组装新的 Blob

由于 Blob 对象是不可改变的，但我们可以进行分割，并组装成一个新的 Blob 对象：

let blob1 = new Blob(['

Hello Leo

'], {type : 'text/html', endings: "transparent"});let blob2 = new Blob(['

Happy Boy!

'], {type : 'text/html', endings: "transparent"});let slice1 = blob1.slice(16);let slice2 = blob2.slice(0, 16);await slice1.text();// currtent slice1 value: "Leo