獲取影象檔案的二進位制表示

這個例子的靈感來自這個問題 。

我們假設你知道如何使用 File API 載入檔案 。

// preliminary code to handle getting local file and finally printing to console
// the results of our function ArrayBufferToBinary().
var file = // get handle to local file.
var reader = new FileReader();
reader.onload = function(event) {
    var data = event.target.result;
    console.log(ArrayBufferToBinary(data));
};
reader.readAsArrayBuffer(file); //gets an ArrayBuffer of the file

現在我們使用 DataView 將檔案資料實際轉換為 1 和 0：

function ArrayBufferToBinary(buffer) {
   // Convert an array buffer to a string bit-representation: 0 1 1 0 0 0...
   var dataView = new DataView(buffer);
   var response = "", offset = (8/8); 
   for(var i = 0; i < dataView.byteLength; i += offset) {
       response += dataView.getInt8(i).toString(2); 
   }
   return response;
}

DataViews 讓你讀/寫數字資料; getInt8 將資料從位元組位置 - 這裡 0，傳入的值 - 在 ArrayBuffer 中轉換為帶符號的 8 位整數表示，toString(2) 將 8 位整數轉換為二進位制表示格式（即 1 和 0 的字串）。

檔案儲存為位元組。 魔術偏移值是通過注意我們將檔案儲存為位元組，即 8 位整數並以 8 位整數表示讀取來獲得的。如果我們試圖將位元組儲存的（即 8 位）檔案讀取為 32 位整數，我們會注意到 32/8 = 4 是位元組空格的數量，這是我們的位元組偏移值。

對於這項任務，DataViews 是矯枉過正的。它們通常用於遇到資料的位元組順序或異構性的情況（例如，在閱讀 PDF 檔案時，它們具有以不同基礎編碼的標題，並且我們希望有意義地提取該值）。因為我們只想要一個文字表示，所以我們不關心異質性，因為根本不需要

使用 UInt8Array 型別陣列可以找到更好 - 更短的解決方案，該陣列將整個 ArrayBuffer 視為由無符號 8 位整陣列成：

function ArrayBufferToBinary(buffer) {
    var uint8 = new Uint8Array(buffer);
    return uint8.reduce((binary, uint8) => binary + uint8.toString(2), "");
}