使用 JavaScript 把 ArrayBuffer 做 base64 編碼


在 HTML DOM 裡面,如果要直接指定圖片、也就是 <img> 的內容、而非一個圖檔網址的話,基本上是可以想辦把圖檔的 binary 內容,直接傳到瀏覽器裡面,然後再透過 DOM 的 Image 物件(w3school),以「data URI scheme」(維基百科)的形式,來指定內容的。

它的使用形式,基本上就是:

Img.src = 'data:image/jpg;base64,xxxxxxxxxxx';

而這邊所指定的 data URL,就是先告訴瀏覽器這是一張格式是 JPEG 的圖檔,然後在「,」之後,就直接給他整張圖的資料。如此一來,瀏覽器就可以直接顯示這張圖片了~

在 Heresy 這邊,基本上就是透過 WebSocket 的 ArrayBuffer(參考),來把 JPEG 檔的資料(Heresy 這邊是直接抓資料、在記憶體內壓縮)、直接傳遞給 JavaScript 的 client 端。

不過,由於 HTML DOM 的 Image 需要的資料格式,是要經過 Base64 編碼(維基百科),所以並不是直接將 JPEG 檔的 binary 資料拿來用就可以了,還需要先把它編碼成 Base64 的形式。而由於經過 Base64 編碼過的資料會比較大、大約會變成本來的 135% 左右,所以為了節省資料傳輸的頻寬,Heresy 這邊是決定以原始資料的形式,把壓縮成 JPEG 後的圖片資料直接傳到瀏覽器、然後在瀏覽器端進行 Base64 的編碼。

而要在瀏覽器內、透過 JavaScript 來進行 Base64 編碼的方法也有很多種,這邊 Heresy 是根據《Encoding XHR image data》的內容,整理一些方法:


FileReader.readAsDataURL()

這邊的作法,是先把資料封包成 Blob 的形式,然後透過 FileReader參考)提供的 readAsDataURL(),直接把資料重新讀取一遍、轉換為 Data URL 的格式;他的程式寫法大致如下:

var blob = new Blob([buffer], { type: type });
var fr = new FileReader();
fr.onload = function () {
  image.src = fr.result;
};
fr.readAsDataURL(blob);

其中,buffer 就是輸入的原始 binary 資料、形式是 ArrayBuffer。而 type 則是他的 MIME 型別,如果是 JPEG 檔的話,就是「image/jpeg」,image 則是要用來顯示圖片的物件。


btoa() + String.fromCharCode.apply()

這個做法,主要是透過 btoa()參考)來把字串轉換成 Base64 的編碼;不過由於 btoa() 只接受字串,所以如果像 Heresy 是使用 ArrayBuffer 的話,則是需要先把他轉換字串。這邊則是透過 String.fromCharCode.apply()ArrayBuffer 的物件。下面就是這邊的程式寫法:

var str = String.fromCharCode.apply(null, new Uint8Array(buffer));
image.src = 'data:image/jpg;base64,' + btoa(str);

自己寫函式做轉換

基本上,Base64 的編碼方法並不複雜,網路上也可以找到很多範例可以參考;例如《Javascript base64》這邊就有提供一個實作的範例;另外在《How can you encode a string to Base64 in JavaScript?》也有提供一些其他的方法。

而 Heresy 這邊之前拿來用的,則是《Display image from blob using javascript and websockets》一文中提供的實作,其程式碼如下:

function encode(input) {
  var keyStr =
          "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  var output = "";
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  var i = 0;
 
  while (i < input.length) {
    chr1 = input[i++];
    chr2 = i < input.length ? input[i++] : Number.NaN;
    chr3 = i < input.length ? input[i++] : Number.NaN;
 
    enc1 = chr1 >> 2;
    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
    enc4 = chr3 & 63;
 
    if (isNaN(chr2)) {
      enc3 = enc4 = 64;
    } else if (isNaN(chr3)) {
      enc4 = 64;
    }
    output += keyStr.charAt(enc1) + keyStr.charAt(enc2) + 
              keyStr.charAt(enc3) + keyStr.charAt(enc4);
  }
  return output;
}

在有 encode() 這個函式的情況下,就可以直接把 Uint8Array 的資料,直接進行 Base64 編碼,而不像 btoa() 需要先轉換成字串了。使用的時候,則是如下:

image.src = 'data:image/jpg;base64,' + encode(new Uint8Array(buffer));

不過基本上,這個方法由於是自己去寫轉換的程式,所以效率應該會比使用內建的函式來的差;但是好處就是相容性會比較好了~


這篇大概就是簡單整理一下,目前 Heresy 知道的幾種方法了~目前算是解決問題了,可能之後有時間,會再來做效能的調整、測試吧。當然,上面的方法,也不見得是最好的,如果有建議,也歡迎提供。

廣告

對「使用 JavaScript 把 ArrayBuffer 做 base64 編碼」的想法

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.