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
- var bytes = 10;
- var arrayBuffer = new ArrayBuffer(bytes);
什么是 DataView Object
ArrayBuffer 没办法直接操作，而你可以使用 DataView 来读取与写入各种二进位资料至 ArrayBuffer。
Insert a number into ArrayBuffer through DataView Object
- /** DataView **/
- var bytes = 2; // 2 bytes
- var aBuffer = new ArrayBuffer(bytes);
- var dataView = new DataView(aBuffer);
- dataView.setUint8(0, 255); // The max number is 255
- var res = dataView.getUint8(0);
- console.log(res);
- // Output = 255
Text Encoder, Decoder
上一个范例中，使用 DataView 可以操作两进位的资料，但是一般人是看不懂二进位资料代表什么意思，所以我们还要透过 TextDecoder 将二进位转成一般文字。
Decode binary data
- /** Text Decode **/
- var bytes= 4;
- var aBuffer = new ArrayBuffer(bytes);
- var dataView = new DataView(aBuffer);
- dataView.setUint32(0, 97);
- var textDecoder = new TextDecoder('utf-8');
- str = textDecoder.decode(dataView);
- console.log(str);
- //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
- var int = parseInt(0x61626364, 10);
- var bytes= 8;
- var aBuffer = new ArrayBuffer(bytes);
- var dataView = new DataView(aBuffer);
- dataView.setUint32(1, int );
- var textDecoder = new TextDecoder('utf-8');
- str = textDecoder.decode(dataView);
- console.log(str);
- //Output = abcd
回應 (Leave a comment)