web端二进制数据

2016年4月5日

介绍

web端有时候也会用到二进制数据,最常见的场景有webgl、canvas、websocket中都有用到,还有有时候数据交互上直接使用二进制数据来传输,然后在前端js解析。

ajax获取二进制数据

通过ajax获取二进制数据,只需要如下设置即可:

req.responseType = "arraybuffer";

此时拿到的就是ArrayBuffers数据对象

DataView

使用包含不同类型数据的ArrayBuffers,最简单的方法是使用一个DataView的缓冲

var dataView = new DataView(buffer);

如读取一个8位整型

dataView.getUint8(0); // 0表示读取的指针位置,单位字节

读取一个32位浮点型

dataView.getFloat32(1); // 1从第一字节处开始读取,32位即4个字节

读取字符串的话,可以在存的时候就存为Unicode编码的字符串

var unicode = dataView.getInt8(0); // 获取unicode编码,如得到65
String.fromCharCode(unicode); // unicode65对应得到的字符串就是A

存储一个数组可以这样存储,首先先存储一个数组长度,紧接着存储具体的数据中的值

var offset = 0;

var count = dataView.getUint32(offset, true); // 数组长度是个32位的整型

offset += 4; // 32位整即占了4个字节

context.beginPath();

for (var i = 0; i < count; i++) {

    var num = dataView.getUint32(offset, true); // 数组中第i个值
    offset += 4;

}