当你在前端页面上传一张图片、播放一段视频，或是处理从后端传来的加密数据时，有没有想过这些操作背后都离不开同一种
底层语言(二进制)
1.1、最基本的二进制对象(ArrayBuffer)
ArrayBuffer 简单说是一片内存，但是你不能直接用它
单位: 字节 (八比特)
js
let buffer = new ArrayBuffer(16); // 创建一个长度为 16字节的数据1.1.1、读ArrayBuffer(TypedArray)
如果我们要写入值或遍历ArrayBuffer，基本上几乎所有操作 ------ 我们必须使用TypedArray
Uint8Array------ 将ArrayBuffer中的每个字节视为 0 到 255 之间的单个数字（每个字节是 8 位，因此只能容纳那么多）。这称为 "8 位无符号整数"。Uint16Array------ 将每 2 个字节视为一个 0 到 65535 之间的整数。这称为 "16 位无符号整数"。Uint32Array------ 将每 4 个字节视为一个 0 到 4294967295 之间的整数。这称为 "32 位无符号整数"。Float64Array------ 将每 8 个字节视为一个5.0x10-324到1.8x10308之间的浮点数。
js
let buffer = new ArrayBuffer(4); // 创建一个长度为 4字节的数据
let view = new Uint8Array(buffer);
view[0] = 63;
view[1] = 65;
for(let num of view) {
console.log(num); //63 65 0 0
}1.1.2、二进制转字符串
js
let uint8Array = new Uint8Array([72, 101, 108, 108, 111]);
alert( new TextDecoder().decode(uint8Array) ); // Hello2、blob
二进制是数据的本体，BLOB 是操作这种数据的工具。就像"水"和"杯子"的关系：水（二进制）是本质，杯子（BLOB）是方便你携带和使用的容器。
2.1、blob属性
2.2、实例方法
-
Blob.arrayBuffer():返回一个 promise，其会兑现一个包含Blob所有内容的二进制格式的ArrayBuffer -
Blob.bytes():返回一个 promise，其会兑现一个包含Blob内容的Uint8Array -
Blob.text():返回一个 promise，其会兑现一个包含Blob所有内容的 UTF-8 格式的字符串。
js
<input type="file" onchange="showFile(this)" />
<script>
async function showFile(input) {
let file = input.files[0];
file.arrayBuffer().then((res) => console.log(res));
}
</script>Blob.slice():返回一个新的Blob对象，其中包含调用它的 blob 的指定字节范围内的数据。Blob.stream():返回一个能读取Blob内容的ReadableStream
js
<input type="file" onchange="showFile(this)" />
<script>
async function showFile(input) {
let file = input.files[0];
const readableStream = file.stream();
const stream = readableStream.getReader();
while (true) {
const { done, value } = await stream.read();
if (done) {
console.log("all blob processed.");
break;
}
console.log(value);
}
}
</script>2.3、blob创建URL
可以在浏览器F12中运行这段代码
js
let link = document.createElement('a');
link.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);2.4、Blob 转换为 base64
可以在浏览器F12中运行这段代码
js
let link = document.createElement('a');
link.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
let reader = new FileReader();
reader.readAsDataURL(blob); // 将 Blob 转换为 base64 并调用 onload
reader.onload = function() {
link.href = reader.result; // data url
link.click();
};
2.5、Image 转换为 blob
js
<img
src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7"
/>
<script>
let img = document.querySelector("img");
// 生成同尺寸的 <canvas>
let canvas = document.createElement("canvas");
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
let context = canvas.getContext("2d");
// 向其中复制图像（此方法允许剪裁图像）
context.drawImage(img, 0, 0);
// 我们 context.rotate()，并在 canvas 上做很多其他事情
// toBlob 是异步操作，结束后会调用 callback
canvas.toBlob(function (blob) {
// blob 创建完成，下载它
let link = document.createElement("a");
link.download = "example.png";
link.href = URL.createObjectURL(blob);
link.click();
//
删除内部 blob 引用，这样浏览器可以从内存中将其清除
URL.revokeObjectURL(link.href);
}, "image/png");
</script>2.6、Bolb的扩展(File对象)
File 对象继承自 Blob，只比bolb多两个属性
name------ 文件名，lastModified------ 最后一次修改的时间戳。
js
<input type="file" onchange="showFile(this)">
<script>
function showFile(input) {
let file = input.files[0];
}
</script>3.读bolb数据
FileReader 是一个对象，其唯一目的是从 Blob对象中读取数据。
主要方法:
readAsArrayBuffer(blob)------ 将数据读取为二进制格式的ArrayBuffer。readAsText(blob, [encoding])------ 将数据读取为给定编码（默认为utf-8编码）的文本字符串。readAsDataURL(blob)------ 读取二进制数据，并将其编码为 base64 的 data url。
读取过程中，有以下事件：
load------ 读取完成，没有 error。error------ 出现 error。
读取完成后，我们可以通过以下方式访问读取结果：
reader.result是结果（如果成功）reader.error是 error（如果失败）。
js
<input type="file" onchange="readFile(this)">
<script>
function readFile(input) {
let file = input.files[0];
let reader = new FileReader();
reader.readAsText(file);
reader.onload = function() {
console.log(reader.result);
};
reader.onerror = function() {
console.log(reader.error);
};
}
</script>