Javascript 處理 Binary 資料 - ArrayBuffer

Tags:

簡中版

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

參考文章

網頁好讀版

This post was last modified by puritys 2015/02/03