最近工作上接手的一个项目涉及到了图片的加密压缩与上传，也就需要用JavaScript直接去操作二进制数据，特地整理了一下JavaScript中的二进制数据类型，当做学习笔记。
起源
历史上JavaScript是没有读写二进制数据能力的，但随着es5中Blob对象的引入以及es6中ArrayBuffer对象、TypedArray和DataView对象的规范化，js处理二进制数据的能力大幅度增强，也能直接处理文件流，网络流等二进制Buffer数据了。
基本的二进制数据类型
ArrayBuffer
ArrayBuffer代表内存当中的一段通用的、固定长度的原始二进制数据缓冲区。它无法被直接读写，需要配合TypedArray对象或DataView对象来操作缓冲区的内容。
我们可以直接通过ArrayBuffer构造函数来创建一段存放二进制数据的连续内存区域。
const buffer = new ArrayBuffer(8);
这里我们创建了一个长度为8个字节的连续内存区域。由于我们没有赋初值，每一个字节单元的值都默认是0.（这里注意ArrayBuffer不能像数组那样直接通过索引下标来访问内存单元的数据）
ArrayBuffer有一个只读的byteLength属性可以读取数组的字节长度，这在ArrayBuffer创建的时候就已经确定。ArrayBuffer还有一个ArrayBuffer.prototype.slice方法用来拷贝自身的一部分生成一个新的ArrayBuffer。
const buffer = new ArrayBuffer(8);
buffer.byteLength // 8
const buf = buffer.slice(0, 4);
buf.byteLength // 4
但ArrayBuffer自身是不可直接读写的，更多操作还是需要依靠TypedArray或DataView来实现。
TypedArray
我们通过ArrayBuffer在内存中存储一段未加工的二进制数据，这一段二进制数据本身只是内存中存储的0,1数据，我们通过不同的格式来解读就会赋予它不同的意义，这里的格式也就是‘视图’，视图有两种，一种是TypedArray，一种是DataView。
TypedArray是一簇api相似的Array-like对象，现在包括以下九种：
- Int8Array();
- Uint8Array();
- Uint8ClampedArray();
- Int16Array();
- Uint16Array();
- Int32Array();
- Uint32Array();
- Float32Array();
- Float64Array();
生成视图可以采用多种方法来。
// TypedArray 不是实际存在的对象，指代以上九种构造函数之一
new TypedArray(length);
new TypedArray(typedArray);
new TypedArray(object);
new TypedArray(buffer [, byteOffset [, length]]);
以Int8Array为例，我们创建一个以8bit为单位存储单元的内存数组。
// 在已存在的ArrayBuffer 上生成视图
const buffer = new ArrayBuffer(4);
const x1 = new Int8Array(buffer);
x1 // [0, 0, 0, 0]
// 不借助事先生成的ArrayBuffer, 直接生成视图
const x2 = new Int8Array(4);
x2[0] = 1;
x2 // [1, 0, 0, 0]
// 通过已有的TypedArray转化而来
const x3 = new Int8Array(4);
x3[0] = 1;
const x4 = new Int8Array(x3);
x4[0] // 1
x4[0] = 2;
x3[0], x4[0] // 1, 2
// 通过对象转化，类似于Array.from方法
const x5 = new Int8Array([1, 2, 3, 4]);
x5 // [1, 2, 3, 4]
TypedArray表现和Array类似，可以用方括号运算符([])访问特定内存单元的数据，也可以使用几乎所有的数组方法，具体可以参考MDN。
TypedArray还有几个特有的属性与方法。
TypedArray.prototype.buffer: 指向我们操作的TypedArray引用的ArrayBuffer；
TypedArray.prototype.byteLength: 返回ArrayBuffer的字节长度；
TypedArray.prototype.byteOffset: 读取ArrayBuffer时的字节偏移量；
TypedArray.prototype.set: 复制一个指定数组的元素保存到TypedArray；
TypedArray.prototype.subarray: 拷贝TypedArray的一个子数组为副本；
const buffer = new ArrayBuffer(4);
const int8Arr = new Int8Array(buffer);
int8Arr.buffer === buffer; // true
int8Arr.byteLength // 4
int8Arr.byteOffset // 0
const int8Arr2 = new Int8Array(4);
int8Arr2.set(int8Arr); // 以int8Arr为数据来源制作了一个相同数据的副本
int8Arr.subarray(2, 3); // 返回以int8Arr中索引从2（含）到3（不含）的数据为数据来源的副本
DataView
不同于类型化数组，一个数组只能存放同一类型的数据，DataView可以在内存中存放不同类型的数据。但TypedArray的一系列方法足以应付各种场景下的ArrayBuffer存取操作，需要用到DataView的场景较少，这里简单介绍下。
DataView对象接受一个ArrayBuffer生成视图。
// new DataView(buffer [, byteOffset [, length]]);
const buffer = new ArrayBuffer(4);
const dv = new DataView(buffer);
DataView有十六个实例方法对应于8种数据类型的存取操作。
- getInt8()
- getUint8()
- getInt16()
- getUint16()
- getInt32()
- getUint32()
- getFloat32()
- getFloat64()
- setInt8()
- setUint8()
- setInt16()
- setUint16()
- setInt32()
- setUint32()
- setFloat32()
- setFloat64()
const buffer = new ArrayBuffer(4);
const dv = new DataView(buffer, 0);
dv.setInt8(0, 4);
dv.getInt8(0);
web浏览器中的二进制对象
web浏览器中常见的二进制对象有Blob和File等。
Blob
Blob对象代表一段二进制对象，并提供了一系列对该二进制数据操作的方法。
生成Blob对象可以使用Blob构造函数，或者对已有Blob对象使用slice切片生成。
const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj)], {type: 'application/json'});
Blob构造函数接受两个参数，一个是buffer数据数组，第二个是只有一个type属性的options对象，type指定文件的MIME类型。
生成的Blob实例有两个只读的属性。
size 生成二进制数据的大小，单位是字节
type 生成二进制数据的MIME类型
File
File对象继承与Blob对象，在Blob的基础上增加了一些属性。
File.prototype instanceof Blob // true
最常见的File类型来自type为file的input元素。
<input type="file" id="uploader" />
<script>
const uploader = document.getElementById('uploader');
uploader.addEventListener('change', () => {
const file = uploader.files[0];
// file
// {
// lastModified: xxxxxxxxxxx,
// lastModifiedDate: Thu Apr 11 2019 10:52:35 GMT+0800 (CST),
// name: "avatar.png",
// size: 7040,
// type: "image/png"
// }
});
</script>
FileReader
在获取到Blob对象或File对象后，我们通常还需要借助FileReader对象将我们的二进制数据转换成需要的形式，如转换成DataURL后用于image, audio, video等标签的直接引入，或转化成ArrayBuffer后进一步对我们的二进制数据进行操作。
FileReader提供了以下转化方法。
- FileReader.prototype.readAsDataURL
- FileReader.prototype.readAsArrayBuffer
- FileReader.prototype.readAsText
- FileReader.prototype.readAsBinaryString
function readBlob(blob, type) {
return new Promise(resolve => {
const reader = new FileReader();
reader.onload = (e) => {
resolve(e.target.result);
};
reader[`readAs${type}`](blob);
});
}
const blob = new Blob('hello, world!'.split(''));
readBlob(blob, 'DataURL').then(console.log);
其他
除了FileReader外，还有些web api可以输出我们的Blob/File数据。
- URL.createURLObject
- Response对象提供的方法
- Response.prototype.arrayBuffer
- Response.prototype.blob
- Response.prototype.json
- Response.prototype.text
- Response.prototype.formData
const str = 'hello, world';
const blob = new Blob(str.split(''));
URL.createURLObject(blob);
new Response(blob).arrayBuffer(buffer => console.log(new Int8Array(buffer));
// Response也可以直接转化一个String
new Response(str).arrayBuffer(buffer => console.log(new Int8Array(buffer));
应用
根据以上的内容，我们已经可以进行String, Blob/File, ArrayBuffer, TypedArray, DataURL, ObjectURL这些对象之间的相互转化了。有的转化操作直接使用现有api即可，有的需要中间状态过度。以下为几种常见的应用到这些转换的场景。
将json数据下载为本地文件。
function download (url, name) {
const a = document.createElement('a')
a.download = name
a.rel = 'noopener'
a.href = url
a.dispatchEvent(new MouseEvent('click')) // or a.click()
}
// 要被下载的json数据
const json = {
name: 'coffeeBean'
};
const str = JSON.stringify(json, null, 4);
const dataURL = `data;,${str}`;
const blob = new Blob(str.split(''));
const url = URL.createObjectURL(blob);
download(dataURL, 'demo1.json');
download(url, 'demo2.json');
上传本地图片并在网页中显示。
<input type="file" id="uploader" />
<script>
const uploader = document.getElementById('uploader');
uploader.addEventListener('change', () => {
const file = uploader.files[0];
// readBlob函数在以上FileReader小节定义
readBlob(file, 'DataURL').then(result => {
const img = new Image();
img.src = result;
document.body.append(img);
});
});
</script>
利用canvas实现图片压缩
function compress(img, mimeType, maxWidth, quality) {
const canvas = document.createElement('canvas');
cosnt ctx = canvas.getContext('2d');
let width = img.width;
let height = img.height;
if (width > maxWidth) {
height = Math.round(height *= maxWidth / width);
width = maxWidth;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
return new Promise(resolve => {
canvas.toBlob(blob => {
resolve(blob);
}, mimeType, quality);
});
}
// compress(img, 'image/png', 1080, 0.9)
// 第一个参数为要压缩的图片对象
// 第二个为图片的MIME类型
// 第三个为图片等比压缩后的最大宽度
// 第四个参数为canvas压缩的质量
// 函数返回压缩后的图片Blob，可以作为图片文件上传到服务器
js中二进制数据类型的应用场景还有很多，但理解了这些二进制对象之间的关系以及原理之后，就能够在各种二进制数据中自由转换，场景应对起来也就游刃有余了。
