js Blob 与 ArrayBuffer

  1 /*
  2  * Blob
  3  *
  4  * Blob（Binary Large Object）表示二进制类型的大对象，在数据库管理系统中，将二进制数据存储为一个单一个体的集合
  5  * Blob 通常是影像、音频、文本等多媒体文件
  6  * 在 javascript 中，Blob 类型的对象表示不可变的原始数据
  7  * 语法：new Blob(blobParts, option)
  8  */
  9 // 通过字符串创建一个 Blob
 10 const helloWorld = new Blob(["hello", " world"]);
 11 console.log(helloWorld); // Blob {size: 11, type: ''}
 12 
 13 // 通过 Blob 创建一个新的 Blob
 14 const _helloWorld = new Blob([helloWorld]);
 15 console.log(_helloWorld, _helloWorld === helloWorld); // Blob {size: 11, type: ''} false
 16 
 17 // 通过 slice 拿到 Blob 的一部分，然后创建新的 Blob
 18 const helloVue = new Blob([_helloWorld.slice(0, 5), " vue"]);
 19 console.log(helloVue); // Blob {size: 9, type: ''}
 20 
 21 // 指定 MIME 类型和换行方式
 22 const _helloVue = new Blob([helloVue], {
 23     type: "text/plain",
 24     endings: "transparent",
 25 });
 26 console.log(_helloVue); // Blob {size: 9, type: 'text/plain'}
 27 
 28 /*
 29  * type：MIME 类型，示例
 30  *
 31  * .html：text/html
 32  * .text：text/plain
 33  * .js：text/javascript
 34  */
 35 
 36 /*
 37  * endings：默认值为 "transparent"，用于指定包含行结束符 \n 的字符串如何被写入，有以下两个值
 38  *
 39  * native：会被更改为适合宿主操作系统的换行符
 40  * transparent：会保持 blob 中保存的结束符不变
 41  *  */
 42 
 43 // 分片上传
 44 function handle(blob, upload) {
 45     const size = blob.size,
 46         chunkSize = 1024;
 47     let start = 0,
 48         end = chunkSize;
 49     while (start < size) {
 50         upload(blob.slice(start, end, "text/plain"));
 51         start = end;
 52         end = start + chunkSize;
 53     }
 54 }
 55 handle(
 56     new Blob(["a".repeat(1024 * 2)], {
 57         type: "text/plain",
 58         endings: "transparent",
 59     }),
 60     function (chunk) {
 61         console.log(chunk);
 62         // 刚好上传两次
 63         // Blob {size: 1024, type: 'text/plain'}
 64         // Blob {size: 1024, type: 'text/plain'}
 65     },
 66 );
 67 
 68 /*
 69  * Blob URL
 70  *
 71  * Blob URL 是一种伪协议，允许 Blob 和 File 对象用作图像、链接等的 URL 源
 72  * 在浏览器中，我们使用 URL.createObjectURL 方法来创建 Blob URL
 73  * 该方法接收一个 Blob 对象，并为其创建一个唯一的 URL
 74  * 浏览器内部为每个 Blob URL 存储了一个 URL → Blob 的映射，如果这个映射不存在了，则会从浏览器中收到 404 错误
 75  * 因此，此类 URL 较短，生成的 URL 仅在当前文档下才有效
 76  * Blob URL 看似很不错，但实际上它也有副作用
 77  * 由于 Blob URL 映射到 Blob，只要 Blob 仍驻留在内存中，浏览器就无法释放它
 78  * 我们可以调用 URL.revokeObjectURL(url) 来撤销映射，从而允许删除 Blob
 79  */
 80 
 81 const link = URL.createObjectURL(_helloVue);
 82 console.log(link); // blob:null/fffb6ef0-9a06-4503-b982-058929da566b
 83 // 可以作为 a 标签的 link；如果是图片，也可以作为 img 的 src
 84 URL.revokeObjectURL(link);
 85 
 86 /* File：继承自 Blob */
 87 
 88 /*
 89  * FileReader
 90  *
 91  * 用来读取 Blob，并转换为其他数据格式，有以下四种转换方式
 92  * readAsArrayBuffer(file)
 93  * readAsBinaryString(file)
 94  * readAsDataURL(file)
 95  * readAsText(file, encoding)
 96  */
 97 
 98 const reader = new FileReader();
 99 
100 reader.onload = function (e) {
101     const result = e.target.result;
102     console.log(result, result === this.result); // ArrayBuffer(9) true
103 };
104 
105 reader.readAsArrayBuffer(helloVue);
106 
107 /*
108  * ArrayBuffer
109  *
110  * 表示通用的、固定长度的原始二进制数据缓冲区
111  * 转换：通过 FileReader 将 Blob 读取成 ArrayBuffer 数据
112  * 读写：TypeArray 类型，或DataView 方法
113  * 和数组的区别：
114  *         ArrayBuffer 初始化后固定大小，数组长度可变
115  *         ArrayBuffer 放在栈中，数组放在堆中
116  */
117 
118 /*
119  * TypeArray 类型：包括以下具体方法，参数都是 ArrayBuffer
120  *
121  * Int8Array();
122  * Uint8Array();
123  * Uint8ClampedArray();
124  * Int16Array();
125  * Uint16Array();
126  * Int32Array();
127  * Uint32Array();
128  * Float32Array();
129  * Float64Array();
130  */
131 
132 const buffer = new ArrayBuffer(1);
133 const view = new Uint8Array(buffer);
134 console.log(buffer); // ArrayBuffer(1) /* 可以看到，buffer 的数据不可见 */
135 console.log(view); // Uint8Array(1) [0] /* 通过 view 就可以看到数据了 */
136 
137 view[0] = 97;
138 console.log(view); // Uint8Array(1) [97] /* 97 是字符 a 的 unicode 编码 */
139 
140 // ArrayBuffer 转 Blob
141 const char_a = new Blob([buffer], {
142     type: "text/plain",
143     endings: "transparent",
144 });
145 console.log(char_a); // Blob {size: 1, type: 'text/plain'}
146 
147 // Blob 转 Text
148 const toText = new FileReader();
149 toText.onload = function () {
150     console.log(this.result); // a
151 };
152 toText.readAsText(char_a);
153 
154 /*
155  * 补充
156  *
157  * ArrayBuffer 仅仅开辟一段二进制缓冲区，具体行为由 TypeArray 类型或 DataView 方法执行
158  */
159 
160 /*
161  * Data URL
162  *
163  * 格式：data:[MIME type];encoding,content
164  */
165 
166 /*  
167  * 本文旨在理清概念上的关系，经验性的东西仍需积累
168 */