Javascript中的二进制数据类型

原文：Javascript中的二进制数据类型

最近工作上接手的一个项目涉及到了图片的加密压缩与上传，也就需要用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元素。

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');

上传本地图片并在网页中显示。

利用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中二进制数据类型的应用场景还有很多，但理解了这些二进制对象之间的关系以及原理之后，就能够在各种二进制数据中自由转换，场景应对起来也就游刃有余了。

参考

• TypedArray
• DataView
• 二进制数组