javascript 类型数组读取二进制数据

先建一个文件，按UTF-16大端 BOM 格式保存一个字符串：hi aleck，

使用 file API 把他按二进制方式读取到浏览器。

文件读取方法在这里：

http://hi.baidu.com/ecalf830/item/e3b2d2c9b1003222a0b50a39

简单介绍一下 file api 的相关用法

1、在浏览器中打开文件

当 file 控件有 mutiple 属性时，可以上传多个文件，文件打开后保存在 file 控件的 files 属性，这个例子中只打开一个文件，获取的文件的方式是：

var file = document.getElementById("f").files[0];

2、Blob 与文件读取类 FileReader

二进制大对象 Blob (binary large object) 用于存储二进制字节数据，

创建一个 blob 对象： var blob = new Blob(); 该对象的size属性表示文件的字节数，类似于数组的length，slice 可以从文件中复制出一段二进制数据，用法类似于数组的 silce，复制得到的数据也是 Blob 对象。

FileReader 类用于读取 Blob 数据对象。

创建一个文件读取对象：var reader = new FileReader();

浏览器打开的文件 file 继承于 Blob (thefile instanceof Blob == true)，因此可以使用 FileReader 打开 file 对象。

FileReader 对象的属性、方法及在打开Blob数据过程中可以使用的回调函数（试在 firebug 下查看 FileReader 的属性和方法 console.log(new FileReader())）：

    error: null

    onabort: null

    onerror: null

    onload: null //读取成功调用

    onloadend: function(){...} //读取完毕调用，即使读取失败也会调用

    onloadstart: null //开始打开文件时调用

    onprogress: null  //文件打开过程中，反复调用直至文件读取完毕

    readyState: 2

    result: "þÿhi aleck" //文件读取结果得到的字符串

    __proto__: FileReader

    DONE: 2

    EMPTY: 0

    LOADING: 1

    abort: function abort() { [native code] }

    addEventListener: function addEventListener() { [native code] }

    constructor: function FileReader() { [native code] }

    dispatchEvent: function dispatchEvent() { [native code] }

    readAsArrayBuffer: function readAsArrayBuffer() { [native code] }  //读取为二进制字节缓冲

    readAsBinaryString: function readAsBinaryString() { [native code] } //读取为二进制数据

    readAsDataURL: function readAsDataURL() { [native code] } //读取为base64数据

    readAsText: function readAsText() { [native code] } //读取为普通字符串

    removeEventListener: function removeEventListener() { [native code] }

    __proto__: Object

可以在 onloadend 事件内绑定处理打开的文件数据的回调函数，然后打开文件，

这里将文件以二进制方式打开：reader.readAsBinaryString();

查看 reader.result 可以看到读取结果。由于javascript 没有二进制数据类型，因此，二进制数据按每个字节的8位二进制数对应的 unicode 编码的字符显示出来，因此二进制数据实际被显示为一串 ascii 字符，如果要读取的文件是英文格式的，那么这个二进制数据看起来跟实际的字符串很相似。

本例中 UTF-16 BOM 大端格式的字符串 "hi aleck" 打开为二进制后得到：

reader.result = "þÿhi aleck" //注意 reader.result.length 为 18，这其中包含了空字符 \0 和标记字节流存储顺序的“零宽空格”

每个字节的8位二进制转为二位十六进制为：

 reader.result.split('').map(function(v){ return  ('0'+v.charCodeAt(0).toString(16)).slice(-2); })

得到：

["fe", "ff", "00", "68", "00", "69", "00", "20", "00", "61", "00", "6c", "00", "65", "00", "63", "00", "6b"]

由于是UTF-16编码，每个字符占二字节，feff 是用于字节序标记的字符"零宽空格"，其余字符编码由于只需要一个字节，高位字节用 0 补足，unicode 编码为0 的字符为空字符 \0 。

例如 0068 是字母 h 的 2 字节(16位二进制转4位16进制)编码格式：

String.fromCharCode(parseInt('0068',16)) //h

3、字节数组缓冲 ArrayBuffer 和类型数组

ArrayBuffer 类的对象指向一段定长的内存空间，其属性 byteLength 表示对象的字节长度，slice 对象类似于 Blob 和数组的 slice 用于拷贝出一定字节长度的缓冲数据并创建成新的 ArrayBuffer 对象。

ArrayBuffer 缓冲字节数据对象只是一段内存空间，不能直接访问，需要通过 DataView 对象（DataView 有点类似一个混合类型数组的元素组成的 list，其元素可以是几种类型数组中的任一种，这里不细述）或类型数组访问内存的数据，他们的关系有点像 Blob 与 FileReader .

其中 javascript 类型数组有下面几种：

Float32Array 

Float64Array 

Int8Array

Int16Array 

Int32Array 

Uint8Array 

Uint16Array 

Uint32Array 

Uint8ClampedArray

可以访问下面的网站了解这些数据类型

http://www.javascripture.com/DataView

本例中使用存储无符号整数的 Uint8Array、 Uint16Array、 Uint32Array

Uint8Array 每个元素为一字节，表达范围为 0-255，Uint16Array 每元素 2字节，Uint32Array 每个元素4字节。

如果想要将缓冲字节 ArrayBuffer 对象读入到类型数组中，比如可以这样

var buff = new ArrayBuffer(16); //创建一段16字节大小的内存缓冲空间

var u8 = new Uint8Array(buff,8); //创建一个8位无符号整形类型数组，并指向 buff 对象的前 8 个字节。

var u16 = new Uint16Array(buff,8); //16 位类型数组

var u32 = new Uint32Array(buff,8); //32为类型数组

组要注意的是，类型数组并没有拷贝出 ArrayBuffer 对象的内容，而是指向对应的内存空间，因此 u8、u16、u32 这几个数组访问的是同一块内存，这意味着通过 u8 修改了内容后，u16 和 u32 将访问到改变后的内容。

现在 u8、u16 、u32 指向同一块 8 字节长度的内存，因此 u8 有8 个元素，u16 有4个元素，u32 则只有2个元素。

将上面打开文件得到的字节的前8个通过u8数组逐个存入 buff 内

["fe","ff","00","68","00","69","00","20"].forEach(function(v,i){  u8[i] = parseInt(v,16);});

有：

u8 = [254, 255, 0, 104, 0, 105, 0, 32]

u16 =  [65534, 26624, 26880, 8192]

u32 = [1744895998, 536897792]

查看数组的元素：

('00'+u8[0].toString(16)).slice(-2) // "fe"
('00'+u8[1].toString(16)).slice(-2) // "ff"
('00'+u8[2].toString(16)).slice(-2) // "00"
('00'+u8[3].toString(16)).slice(-2) // "68"
('00'+u8[4].toString(16)).slice(-2) // "00"
('00'+u8[5].toString(16)).slice(-2) // "69"
('00'+u8[6].toString(16)).slice(-2) // "00"
('00'+u8[7].toString(16)).slice(-2) // "20"

 
('0000'+u16[0].toString(16)).slice(-4) // "fffe"
('0000'+u16[1].toString(16)).slice(-4) // "6800"
('0000'+u16[2].toString(16)).slice(-4) // "6900"

('0000'+u16[3].toString(16)).slice(-4) // "2000"

 
('00000000'+u32[0].toString(16)).slice(-8) // "6800fffe"
('00000000'+u32[1].toString(16)).slice(-8) // "20006900"

可以看到，读取 Blob 对象时，在多字节类型数组中( u16 2字节的元素和 u32 4字节的元素)，元素的字节是按低位在前的顺序存储的，即小端方式。

我们也可以直接把通过 FileReader 的 readAsArrayBuffer() 方法将 Blob 对象读取到 ArrayBuffer 对象中，然后在类型数组中访问字节：

reader.readAsArrayBuffer(blob);

var u16 = new Uint16Array(reader.result); 

u16 为 [65534, 26624, 26880, 8192, 24832, 27648, 25856, 25344, 27392]

类型数组的数据溢出问题：

因为数组元素类型决定其在内存中占据的字节长度，其数值表达范围是按不同类型是不同的，如果存储的数值超出其表达范围便发生溢出，例如， Uint8Array 类型的数组元素只占据一个字节，元素值的表达范围是 8位2进制，即 0～255 ，如果试图存储 257 将发生溢出，实际会得到取模后的值

var uint8 = new Uint8Array(10);
uint8[0] //0
uint8[0]=257; 

uint8[0]; //1  257%256 = 1
uint8[0] = -1；
uint8[0]； //255   -1+256=255

uint8[0] = x;  则   uint8[0] == (x%256+256)%256 ; //true

 
Uint8ClampedArray 跟 Uint8Array 不同，如果给 Uint8ClampedArray 类型的数组元素赋值超出范围，则取最靠近所赋值的合法的值，
这个数组可以用于处理图像的颜色数据,例如 canvas 的 image.data

var context = document.createElement("canvas").getContext("2d");

var imageData = context.createImageData(16, 16);

console.log(imageData); //ImageData {height: 16, width: 16, data: Uint8ClampedArray[1024]}

console.log(imageData.data instanceof Uint8ClampedArray)//true

var cint8 = new Uint8ClampedArray(10);  // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
cint8[0]=257; // [255, 0, 0, 0, 0, 0, 0, 0, 0, 0]
cint8[0]= -2; //[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

cint8[0] = x;则 cint8[0] == Math.min(Math.max(0,x),255)

posted @ 2012-11-25 04:58 ecalf 阅读(6348) 评论(0) 编辑收藏举报

刷新页面返回顶部

ECALF'S WEB BOX

Note book about web dev

javascript 类型数组读取二进制数据

公告