2015
Feb
02

Javascript 内建已经支援二进位资料的处理,浏览器 Chrome, Firefox, IE 都有支援此功能,而处理二进位最重要的两个物件是 ArrayBuffer 与 DataView ,透过这两个物件这能够很简单的处理好 Binary Data.

什么是 ArrayBuffer Object

ArrayBuffer 是用来储存二进位资料的一种资料格式,可以用来储存各种档案内容,例如 jpg, png, txt, mp3 ...等,任何你想得到的,都可以用 ArrayBuffer 储存下来,但是 ArrayBuffer 这个物件不能直接对它操作存取的行为,必须透过另一个 Object 叫 DataView 来处理。

To allocate a ArrayBuffer
  1. var bytes = 10;
  2. var arrayBuffer = new ArrayBuffer(bytes);

什么是 DataView Object

ArrayBuffer 没办法直接操作,而你可以使用 DataView 来读取与写入各种二进位资料至 ArrayBuffer。


Insert a number into ArrayBuffer through DataView Object
  1. /** DataView **/
  2. var bytes = 2; // 2 bytes
  3. var aBuffer = new ArrayBuffer(bytes);
  4. var dataView = new DataView(aBuffer);
  5. dataView.setUint8(0, 255); // The max number is 255
  6.  
  7. var res = dataView.getUint8(0);
  8. console.log(res);
  9. // Output = 255

Text Encoder, Decoder

上一个范例中,使用 DataView 可以操作两进位的资料,但是一般人是看不懂二进位资料代表什么意思,所以我们还要透过 TextDecoder 将二进位转成一般文字。

Decode binary data
  1. /** Text Decode **/
  2. var bytes= 4;
  3. var aBuffer = new ArrayBuffer(bytes);
  4. var dataView = new DataView(aBuffer);
  5. dataView.setUint32(0, 97);
  6. var textDecoder = new TextDecoder('utf-8');
  7. str = textDecoder.decode(dataView);
  8. console.log(str);
  9. //Output = a

dataView 中的 setUint32 ,是指设定一个 32 bit 的数字, 32 bits 等同 8 个 bytes 所以我可以塞满四个英文字母,一个英文字母 'a' 的 ASCII code 为 97, 转换成 16 进位等於数字 "61", 其它字母的 16 进位数字分别是 'b' = "62", 'c' = "63", 'd' = "64",所以我可以指定 "61 62 63 64" 代表 "abcd"。

Example
  1. var int = parseInt(0x61626364, 10);
  2. var bytes= 8;
  3. var aBuffer = new ArrayBuffer(bytes);
  4. var dataView = new DataView(aBuffer);
  5. dataView.setUint32(1, int );
  6. var textDecoder = new TextDecoder('utf-8');
  7. str = textDecoder.decode(dataView);
  8. console.log(str);
  9. //Output = abcd

参考文章


回應 (Leave a comment)