获取图像文件的二进制表示

这个例子的灵感来自这个问题 。

我们假设你知道如何使用 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), "");
}