Blob深入了解

Blob

Blob 表示二进制类型的大对象，通常是影像、声音或多媒体文件，在 Javascript中Blob表示一个不可变、原始数据的类文件对象。

构造函数如下:

new Blob(lobParts,options);

属性

• lobParts : 数据类型，可以存放任意多个ArrayBuffer、ArrayBufferView、Blob或者DomString(会编码为Utf-8)，将它们连接起来构成Blob对象的数据。
• options : 可选项，用于设置Blob对象的属性，可以指定如下两个属性: | 属性名 | 描述 | | —- | —- | | size | Blob对象中所包含数据的大小。字节为单位。只读 | | type | 一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。只读 |

方法

• slice(start:number,end:number,contentType:DOMString) ：类似于数据的slice方法，将原始Blob对象按照指定范围分割成新的Blob对象并返回，可以用作切片上传。
• stream() ：返回一个能读取blob内容的ReadableStream。
• text() ：返回一个Promise对象且包含blob所有内容的UTF-8格式的 USVString。
• arrayBuffer() ：返回一个Promise对象且包含blob所有内容的二进制格式的ArrayBuffer。

将blob（或者file）二进制文件保存到 formData 进行网络请求（之后可以获取到图片的imageUrl可以用作图片展示等操作）

File

File 对象是一种特殊的Blob对象，继承了Blob的属性和方法，当然同样也可以用作formData二进制文件上传

File的获取

属性

方法

File 对象没有自己的实例方法，由于继承了 Blob 对象，因此可以使用 Blob 的实例方法slice()。

数据缓冲区

从XHR、File API、Canvas 等等各种地方，读取了一大串字节流，如果用JS里的Array去存，又浪费，又低效。在编程中，数据缓冲区(或简称为缓冲区)是物理内存中中操作的二进制数据的存储区(比硬盘驱动器访问快)，用于在数据从一个位置移动到另一个位置时存储临时数据，解释器借助存储二进制数据的内存缓冲区读取行。主内存中有一个正在运行的文件，如果解释器必须返回文件以读取每个位，则执行过程将耗费大量时间。为了防止这种情况，Javascript使用数据缓存区，该缓存区将一些位存储在一起，然后将所有位一起发送给解释器。这样，Javascript解释器就不必担心从文件数据中检索文件。这种方法节省了执行时间并加快了应用程序的速度。公众缓冲区类对数据执行有效的二进制操作，包括 File、Blob、ArrayBuffer 和 Array。选择的方法决定了内存中缓冲区的内部结构。

Buffer

buffer 是 Node.js 提供的对象，前端没有。它一般应用于 IO操作，例如接收前端请求数据的时候，可以通过Buffer相关的API创建一个专门存放二进制数据的缓存区对接收到的前端数据进行整合，一个Buffer类似于一个整数数组，但它对应于V8堆内存之外的一块原始内存。

ArrayBuffer、ArrayBufferView

ArrayBuffer

ArrayBuffer 表示固定长度的二进制数据的原始缓冲区，它的作用是分配一段可以存放数据的连续内存区域，因此对于高密度的访问 (如音频数据) 操作而言它比JS中的Array速度会快很多，ArrayBuffer 存在的意义就是作为数据源提前写入在内存中，因此其长度固定。

ArrayBufferView

由于ArrayBuffer对象不提供任务直接读写内存的方法，而ArrayBufferView对象实际上是建立在ArrayBuffer对象基础上的视图，它制定了原始二进制数据的基本处理单元，通过ArrayBufferView对象来读取ArrayBuffer对象的内容。类型化数组(TypedArrays)和DataView是ArrayBufferView的实例。

TypedArrays

类型化数据是Javascript新的概念，专为访问原始的二进制数据而生，本质上，类型化数组和ArrayBuffer是一样的，只不过是他具备读写功能。

因为Javascript数组使用的是Hash查找方式，而类型化数组直接访问固定内存，因此速度更快。同时，类型化数组天生处理二进制数据，这对于 XMLHttpRequest、Canvas、webGL 等技术有着先天的优势

TypedArray的应用如何拼接两个音频文件：
fetch请求 -> ArrayBuffer -> TypedArray -> 拼接成一个 TypedArray -> ArrayBuffer -> Blob -> Object URL

DataView

DataView 对象可以在ArrayBuffer中的任意位置读取和存储不同类型的二进制数据。

创建DataView的语法 :

var dataView = new DataView(DataView(buffer,byteOffset[可选],byteLength[可选]));

DataView属性 :

FileReader

我们无法直接访问Blob或者文件对象的内容，如果想要读取它们并转化为其它格式的数据，可以借助 FileReader对象的API进行操作

• readAsText(Blob) : 将Blob转化为文本字符串
• readAsArrayBuffer(Blob) : 将Blob转为ArrayBuffer 格式数据
• readAsDataURL() : 将Blob转化为Base64格式的DataURL

BlobURL

BlobURL（ObjectURL） 是一种伪协议，只能由浏览器在内部生成，我们知道 script/img/video/iframe 等标签的src属性和background的url可以通过url和base64来显示，我们同样可以把blob或者file转化为url生成BlobURL来展示图像，BlobURL允许Blob和File对象用作对象，下载二进制数据链接等的URL源。

dataURL

dataURL 允许内容的创建者将较小的文件嵌入到文档中

语法格式 :

data:[<mediatype>][;base64],data

• data : 前缀
• mediatype : 表明数据类型，是一个MIME类型字符串，如image/jpeg表示一个JPEG图片文件。如果省略，默认值为 text/plain;charset=US-ASCII。
• base64 : 标志位 (如果是文本，则可选)
• data : 数据本身

如何获取DataUrl

1. readAsDataURL()就是将Blob转化为Base64格式的DataUrl;
2. 使用原生Web API 编码/解码

   Javascript中有两个函数负责编码和解码base64字符串，分别是atob和btoa。两者都只针对 Data URL中的data进行处理

btoa('hello base64') // "PHhtbD5mb288L3htbD4="
atob('PHhtbD5mb288L3htbD4=') // "<xml>foo</xml>"

• atob() : 负责解码已经使用了base64编码了的字符串
• btoa() : 将二进制字符串转为base64编码的 ASCII 字符串。

1. Canvas的toDataURL方法；

DataURL与BlobURL的区别

BlobURL基本用法与DataURL相同，都可以通过将其放在地址栏中进行检查或者用作普通URL使用。

但是，存在以下差异：

1. BlobUrl始终是唯一字符串，即使你每次传递相同的Blob，每次也会生成不同的BlobUrl；DataUrl值跟谁Blob而变化；
2. 就BlobUrl而言，它并不代表数据本身，数据存储在浏览器中，BlobUrl只是访问它的key．数据会一直有效，直到关闭浏览器或手动清除．而DataUrl是直接编码的数据本身。因此即使将BlobUrl传递给服务器等也无法访问数据。
3. BlobUrl的长度一般比较短，但是DataUrl因为直接存储图片base64编码后的数据，往往很长 (Base64编码的数据体积通常会比二进制格式的图片体积大1/3。)，因此当显示大图片时，使用BlobUrl能获取更好的性能。
4. BlobUrl可以方便的使用XMLHttpRequest获取源数据 (xhr.responseType = ‘blob’) 。对于DataUrl，并不是所有浏览器都支持通过XMLHttpRequest获取源数据。