前端二进制数据处理

Browser二进制数据对象

ArrayBuffer

“用来表示「通用的、固定长度的」原始二进制数据缓冲区” ——MDN

• 构造函数创建

// length 单位字节
new ArrayBuffer(length)

• 属性/方法
• isView: 静态方法 isView，如果参数是 ArrayBuffer 的视图实例则返回 true，例如 类型数组对象 或 DataView 对象

const buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer) // false

const v = new Int32Array(buffer);
ArrayBuffer.isView(v) // true

• byteLength：数组的字节大小。访问器属性，不可更改

parseInt(buffer.byteLength / 1024);//文件大小，单位KB;

• .slice()：返回一个新的 ArrayBuffer ，它的内容是这个 ArrayBuffer 的字节副本，从begin（包括），到end（不包括）
slice方法其实包含两步，第一步是先分配一段新内存，第二步是将原来那个ArrayBuffer对象拷贝过去

TypedArray

什么是视图

TypedArray视图

“一个类型化数组（TypedArray）对象描述了一个底层的二进制数据缓冲区的一个类数组视图（view）” ——MDN

实例

• TypedArray 数组的所有成员，都是同一种类型。

• TypedArray 数组的成员是连续的，不会有空位。

• TypedArray 数组成员的默认值为 0。比如，new Array(10)返回一个普通数组，里面没有任何成员，只是 10 个空位；new Uint8Array(10)返回一个 TypedArray 数组，里面 10 个成员都是 0。

• TypedArray 数组只是一层视图，本身不储存数据，它的数据都储存在底层的ArrayBuffer对象之中，要获取底层对象必须使用buffer属性

构造函数

TypedArray(buffer, byteOffset=0, length?)

// 创建一个8字节的ArrayBuffer
const b = new ArrayBuffer(8);

// 创建一个指向b的Int32视图，开始于字节0，直到缓冲区的末尾
const v1 = new Int32Array(b);

// 创建一个指向b的Uint8视图，开始于字节2，直到缓冲区的末尾
const v2 = new Uint8Array(b, 2);

// 创建一个指向b的Int16视图，开始于字节2，长度为2
const v3 = new Int16Array(b, 2, 2);

// 这其中，只要任何一个视图对内存有所修改，就会在另外两个视图上反应出

const buffer = new ArrayBuffer(8);
const i16 = new Int16Array(buffer, 1);
// Uncaught RangeError: start offset of Int16Array should be a multiple of 2

TypedArray(length)

const f64a = new Float64Array(8);
f64a[0] = 10;
f64a[1] = 20;
f64a[2] = f64a[0] + f64a[1];

TypedArray(typedArray)

const typedArray = new Int8Array(new Uint8Array(4));

const x = new Int8Array([1, 1]);
const y = new Int8Array(x.buffer);
x[0] // 1
y[0] // 1

x[0] = 2;
y[0] // 2

TypedArray(arrayLikeObject)

const typedArray = new Uint8Array([1, 2, 3, 4]);

const normalArray = [...typedArray];
// or
const normalArray = Array.from(typedArray);
// or
const normalArray = Array.prototype.slice.call(typedArray);

属性/方法

const a = new Uint8Array(8);
const b = new Uint8Array(8);

b.set(a);

// 下面三种方法都会生成同样一个 TypedArray 数组
// 方法一
let tarr = new Uint8Array([1,2,3]);

// 方法二
let tarr = Uint8Array.of(1,2,3);

// 方法三
let tarr = new Uint8Array(3);
tarr[0] = 1;
tarr[1] = 2;
tarr[2] = 3;

DataView

"DataView 视图是一个可以从 二进制 ArrayBuffer 对象中读写多种数值类型的底层接口，使用它时，不用考虑不同平台的字节序问题" ——MDN

什么是字节序

字节序指的是数值在内存中的表示方式。

什么是小端字节序，什么是大端字节序呢，简单来说就是如何按顺序存储字节到内存地址的问题

低位存储在前即小端字节序👇

高位存储在前即大端字节序👇

因此产生了计算机界的大端与小端之争，不同的CPU厂商并没有达成一致。x86 体系的计算机都采用小端字节序（little endian）

网络中的字节序

当然对于本机来说，你想怎么存就怎么存，但是网络的诞生就不一样了

TCP/IP协议出场，RFC1700规定使用“大端”字节序为网络字节序，其他不使用大端的计算机要注意了，发送数据的时候必须要将自己的主机字节序转换为网络字节序（即“大端”字节序），接收到的数据再转换为自己的主机字节序。这样就与CPU、操作系统无关了，实现了网络通信的标准化

 

构造函数

new DataView(ArrayBuffer buffer [, 字节起始位置 [, 长度]]);

属性

• DataView.prototype.buffer：返回对应的 ArrayBuffer 对象

• DataView.prototype.byteLength：返回占据的内存字节长度

• DataView.prototype.byteOffset：返回当前视图从对应的 ArrayBuffer 对象的哪个字节开始

方法

• getInt8：读取 1 个字节，返回一个 8 位整数。

• getUint8：读取 1 个字节，返回一个无符号的 8 位整数。

• getInt16：读取 2 个字节，返回一个 16 位整数。

• getUint16：读取 2 个字节，返回一个无符号的 16 位整数。

• getInt32：读取 4 个字节，返回一个 32 位整数。

• getUint32：读取 4 个字节，返回一个无符号的 32 位整数。

• getFloat32：读取 4 个字节，返回一个 32 位浮点数。

• getFloat64：读取 8 个字节，返回一个 64 位浮点数。

• setInt8：写入 1 个字节的 8 位整数。

• setUint8：写入 1 个字节的 8 位无符号整数。

• setInt16：写入 2 个字节的 16 位整数。

• setUint16：写入 2 个字节的 16 位无符号整数。

• setInt32：写入 4 个字节的 32 位整数。

• setUint32：写入 4 个字节的 32 位无符号整数。

• setFloat32：写入 4 个字节的 32 位浮点数。

• setFloat64：写入 8 个字节的 64 位浮点数。

场景

AJAX

let xhr = new XMLHttpRequest();
xhr.open('GET', someUrl);
xhr.responseType = 'arraybuffer';

xhr.onload = function () {
  let arrayBuffer = xhr.response;
  // ···
};

xhr.send();

Fetch API

fetch(url)
.then(function(response){
  return response.arrayBuffer()
})
.then(function(arrayBuffer){
  // ...
});

Canvas

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const uint8ClampedArray = imageData.data;

WebSocket

let socket = new WebSocket('ws://127.0.0.1:8081');
socket.binaryType = 'arraybuffer';

// Wait until socket is open
socket.addEventListener('open', function (event) {
  // Send binary data
  const typedArray = new Uint8Array(4);
  socket.send(typedArray.buffer);
});

// Receive binary data
socket.addEventListener('message', function (event) {
  const arrayBuffer = event.data;
  // ···
});

File API

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
  const arrayBuffer = reader.result;
  // ···
};

Blob

Object URL

blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641

Blob API

构造函数

var aBlob = new Blob(blobParts, options);

• type —— 默认值为 ""，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。

• endings —— 默认值为 "transparent"，用于指定包含行结束符 \n 的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持 blob 中保存的结束符不变。

Blob 属性

• size（只读）：表示 Blob 对象中所包含数据的大小（以字节为单位）。

• type（只读）：一个字符串，表明该 Blob 对象所包含数据的 MIME 类型

Blob 方法

• slice([start[, end[, contentType]]])：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。

• stream()：返回一个能读取 blob 内容的 ReadableStream。

• text()：返回一个 Promise 对象且包含 blob 所有内容的 UTF-8 格式的 USVString。

• arrayBuffer()：返回一个 Promise 对象且包含 blob 所有内容的二进制格式的 ArrayBuffer。

常用转换

字符串转Blob

//将字符串 转换成 Blob 对象
var blob = new Blob(["Hello World!"], {
    type: 'text/plain'
});
console.info(blob);

Blob转字符串

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//将Blob 对象转换成字符串
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
    console.info(reader.result);
}

Blob转ArrayBuffer

var blob = new Blob(["\x01\x02\x03\x04"]),
    fileReader = new FileReader(),
    array;

fileReader.onload = function() {
  array = this.result;
  console.log("Array contains", array.byteLength, "bytes.");
};

fileReader.readAsArrayBuffer(blob);

ArrayBuffer转Blob

var buffer = new ArrayBuffer(32);
var blob = new Blob([buffer]);

TypedArray转Blob

//将 TypeArray  转换成 Blob 对象
var array = new Uint16Array([97, 32, 72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 33]);

var blob = new Blob([array]);

Base64

这64个字符对应关系

浏览器处理API

• 基于二进制数据 “字符串” 创建一个 base64 编码的 ASCII 字符串

• 解码通过 base64 编码的字符串数据

• 解码中文字符会出现乱码

Node.js

Buffer全局对象

// 创建一个长度为 10 的 Buffer，
// 其中填充了全部值为 `1` 的字节。
const buf1 = Buffer.alloc(10);

// 创建一个长度为 10、且未初始化的 Buffer。
// 这个方法比调用 Buffer.alloc() 更快，
// 但返回的 Buffer 实例可能包含旧数据，
// 因此需要使用 fill()、write() 或其他能填充 Buffer 的内容的函数进行重写。
const buf3 = Buffer.allocUnsafe(10);

// 创建一个包含字节 [1, 2, 3] 的 Buffer。
const buf4 = Buffer.from([1, 2, 3]);

字符编码

// 编码
const buf = Buffer.from('hello world', 'utf8');

// 解码
console.log(buf.toString('hex'));
// 打印: 68656c6c6f20776f726c64
console.log(buf.toString('base64'));
// 打印: aGVsbG8gd29ybGQ=

console.log(Buffer.from('fhqwhgads', 'utf8'));
// 打印: <Buffer 66 68 71 77 68 67 61 64 73>
console.log(Buffer.from('fhqwhgads', 'utf16le'));
// 打印: <Buffer 66 00 68 00 71 00 77 00 68 00 67 00 61 00 64 00 73 00>

Buffer 与 TypedArray

参考

前端进阶：二进制数据的操控----附项目代码

引言： 近期，工作中发现，有些前端小伙伴很少接触到二进制数据，所以将项目中二进制数据的应用和大家分享一下，适合入门了解，高手慎入，欢迎拍砖。 项目背景： 基于公司原有图形处理的二进制数据文件（公司自定义的二进制数据格式），实现Canvas绘图。 话说：项目开始的时候我也是一脸懵逼，这么多技术难点需要攻克，1. 如何请求二进制数据流？2. 如何解压二进制数据？3. 如何读取二进制数据？......

https://juejin.im/post/5adca4e0f265da0b767d0fb0

"字节序"是个什么鬼？

（欢迎关注 微信订阅号 AND 知乎专栏：Yang的后花园） 今天女朋友加班，机智的她早已在昨晚准备好食材，回家只需下锅便可。谁知开会就是个无底洞，到了B1，还有B2，无穷匮也。 辛苦如她，为了能让她一回家就吃上热腾腾的饭菜，我准备亲自下厨，奉献出我的第一次。食材都已备好，我相信没有那么难，估摸着应该和我习以为常的流程处理差不多，开火 | 加食材 | 上配料 | 翻炒 | ...

https://zhuanlan.zhihu.com/p/21388517

ES6 入门教程

Oops! ... File not found! 《ECMAScript 6 入门教程》是一本开源的JavaScript语言教程，全面介绍ECMAScript 6新增的语法特性。 本书力争覆盖ES6与ES5的所有不同之处，对涉及的语法知识给予详细介绍，并给出大量简洁易懂的示例代码。 本书为中级难度，适合已有一定JavaScript语言基础的读者，了解这门语言的最新进展；也可当作参考手册，查寻新增的语法点。

https://es6.ruanyifeng.com/#docs/arraybuffer#TypedArray-%E8%A7%86%E5%9B%BE

为什么视频网站的视频链接地址是blob？

自从HTML5提供了video标签，在网页中播放视频已经变成一个非常简单的事，只要一个video标签，src属性设置为视频的地址就完事了。由于src指向真实的视频网络地址，在早期一般网站资源文件不怎么通过referer设置防盗链，当我们拿到视频的地址后可以随意的下载或使用（每次放假回家，就会有亲戚找我帮忙从一些视频网站上下东西）。 ...

https://juejin.im/post/5d1ea7a8e51d454fd8057bea

Base64编码原理与应用

2015年，我们在青云平台上实现了"百度云观测"应用。青云应用本质上是一个iframe，在向iframe服务方发送的请求中会携带一些数据，青云平台会使用 Base64 URL 对这些数据进行编码，其提供的编码解码算法示例如下： // php版本 function base64_URL_encode($data) { return rtrim(strtr(base64_encode($data), '+/', '-_'), '='); } function base64_URL_decode($data) { return base64_decode(str_pad(strtr($data, '-_', '+/'), strlen($data) % 4, '=', STR_PAD_RIGHT)); } 可以看出， Base64 URL 是标准Base64编码的一个变种，分别用 -、_ 替换标准Base64编码结果中的 + 、 / ，并删除结果最后的 = 。 在实现 "百度云观测" 青云应用时，我在想： 为什么要使用Base64编码？ Base64编码算法是什么样的？ 本文是围绕这两个问题思考和实践的结果。 我认为，理解Base64或其他类似编码的关键有两点： 计算机最终存储和执行的是01二进制序列，这个二进制序列的含义则由解码程序/解释程序决定 很多场景下的数据传输要求数据只能由简单通用的字符组成，比如HTTP协议要求请求的首行和请求头都必须是ASCII编码 以青云应用为例，简单解释这两点。青云平台通过POST一个表单来获取iframe，表单有 payload 和 signature 两项， payload 原本是一个JSON对象，其中的键值可能包含一些特殊字符，比如 &、/ 等，由于青云设计的一种通用的请求交互方案，需要考虑iframe服务方服务器端的各种可能实现，有些服务器端实现没有考虑表单值有这些特殊字符，或者POST请求被中间服务器转换成GET请求再次发出，对于URL来说，&、/ 都是具有特殊含义的字符，所以需要对请求数据进行特殊编码避免这些字符出现 - 数据发送方对数据按规则进行编码，接收方对应地按规则解码数据。 Base64编码之所以称为Base64，是因为其使用64个字符来对任意数据进行编码，同理有Base32、Base16编码。标准Base64编码使用的64个字符为： 这64个字符是各种字符编码（比如ASCII编码）所使用字符的子集，基本，并且可打印。唯一有点特殊的是最后两个字符，因对最后两个字符的选择不同，Base64编码又有很多变种，比如Base64 URL编码。 Base64编码本质上是一种将二进制数据转成文本数据的方案。对于非二进制数据，是先将其转换成二进制形式，然后每连续6比特（2的6次方=64）计算其十进制值，根据该值在上面的索引表中找到对应的字符，最终得到一个文本字符串。 假设我们要对 Hello!

http://blog.xiayf.cn/2016/01/24/base64-encoding/

nodejs.org

https://nodejs.org/api/buffer.html