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)