ArrayBuffer

就是字节数组，不能直接操作。
只能通过类型数组对象或 DataView对象 来操作
它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

创建一个长度为8个字节的buffer 
const buffer = new ArrayBuffer(8); 
console.log(buffer.byteLength);

TypedArray

抽象的，实现类有如下

类型	描述	大小	范围
Int8Array	8 位二进制有符号整数	1	-128 to 127
Uint8Array	8 位无符号整数	1	0 to 255
Int16Array	16 位二进制有符号整数	1	-32768 to 32767
Uint16Array	16 位无符号整数	1	0 to 65535

注意对 int8Array每一位赋值后，改变的其实是传入的buffer，说了不能直接修改。间接改Arraybuffer
TypedArray的实现类，只是定义每多少位，放一个数据而已

const buffer = new ArrayBuffer(8);
console.log(buffer.byteLength); //8
// 放入有类型的数组里后，就可以遍历，往buffer里放数据了
const int8Array = new Int8Array(buffer);
console.log(int8Array.length); //8
// 放入有类型的数组里后，就可以遍历，往buffer里放数据了
const int16Array = new Int16Array(buffer);
console.log(int16Array.length); //4

DataView

是一个可以从二进制ArrayBuffer对象中读写多种数值类型的底层接口，相比上面的Int8Array，更自由可以自己决定写入的数字，占多少位
里面有各种getInt8 setInt8 16 32......具体参考文档

浏览器里的Blob

new Blob( array, options );
- array: 可以是 ArrayBuffer, ArrayBufferView, Blob, DOMString
- options 参考文档


new Blob([str], { type: "application/json" });
const reader = new FileReader();
reader.readAsArrayBuffer(blob); // 转Arraybuffer
reader.readAsDataURL(blob); // 转BASE64
reader.readAsText(blob, 'UTF-8'); // 转text

浏览器里的src, href,怎么使用Blob里面的数据？
URL.createObjectURL
URL.revokeObjectURL

function download () { 
    let debug = { hello: "world" }; 
    let str = JSON.stringify(debug); 
    var blob = new Blob([str], { type: 'application/json' }); 
    let objectURL = URL.createObjectURL(blob); 
    const a = document.createElement('a'); 
    a.download = 'hello.json'; 
    // 画面上不打开新tab
    a.rel = 'noopener'; 
    a.href = objectURL; 
    a.dispatchEvent(new MouseEvent('click')); 
    //释放一个之前已经存在的、通过调用URL.createObjectURL()创建的 URL 对象
    URL.revokeObjectURL(objectURL); 
}

图片相关操作
- 预览： input框选择了文件后，用fileReader读成base64，给img的src就可以预览了。
- 裁剪： canvas的ctx.drawImage把img dom传进去，就画出来，然后还有ctx.getImageData，获取图片里某一块的数据，然后新建一个canvas2对象调用ctx2.putImageData把刚get来的传进去，新canvas2对象里就有截取的图片的部分的数据了，然后 canvas的ctx.toDataURL()转成可以给src或者href用的Data URLs
- 裁剪出的img dom有了，怎么上传呢。就用那个Data URLs，拿到base64的部分。然后遍历，取其每个字母的charCode，放入一个ArrayBuffer.
```
// data url eg: data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E
let bytes = atob(xxxxxxDataURL.split(",")[1]); 

let arrayBuffer = new ArrayBuffer(bytes.length); 

// 每个字母的code， 存8位
let uint8Array = new Uint8Array(arrayBuffer); 

for (let i = 0; i < bytes.length; i++) { 
    uint8Array[i] = bytes.charCodeAt(i); 
} 

let blob = new Blob([arrayBuffer], { type: 'image/png' }); 

let request = new XMLHttpRequest(); 
let formData = new FormData(); 
formData.append("avatar", blob); 
request.open("POST", '/upload', true); 
request.send(formData);
```

字节数组-个人笔记

ArrayBuffer

TypedArray

DataView

浏览器里的Blob

api调用转化图