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)