如何在JavaScript中创建图像的文本二进制表示？

Question

对于一个小项目，我想将图像转换为二进制表示(0和1)。因为我想在一台未配置为运行PHP、.NET、...的机器上使用它。我想用JavaScript来做这件事。

此时，我设法使用FileReader读取了该文件，它为我提供了一个ArrayBuffer。

但是我不知道如何将这个ArrayBuffer转换为位表示。

我当前的版本可以在这个jsfiddle上找到。

function ArrayBufferToBit(buffer) {
    // How to convert my array buffer to a textual bit-representation? 0 1 1 0 0 0...
    return buffer;
  }

非常感谢您的帮助！

Answer 1

使用DataView

function ArrayBufferToBit(buffer) {
    var dataView = new DataView(buffer);
    var response = "", offset = (8/8); 
    // I assume we will read the entire file as a series of 8-bit integers, 
    // i.e. as a byte, hence my choice of offset.
    for(var i = 0; i < dataView.byteLength; i += offset) {
        response += dataView.getInt8(i).toString(2); 
        // toString is the secret sauce here.
    }
    return response;
}

Dataview允许您读/写数字数据；getInt8将数据从ArrayBuffer中的字节位置转换为带符号的8位整数表示，toString(2)将8位整数转换为二进制表示格式(即1和0的字符串)。

‘魔术’偏移值是通过注意我们将文件存储为字节，即8位整数，并以8位整数表示读取它来获得的。如果我们试图将字节保存(即8位)的文件读取为32位整数，我们会注意到32/8 =4是字节空间的数量，这是我们的字节偏移量。

除了类型化数组之外，它还是从ArrayBuffer读取/写入的recommended way

ArrayBuffer对象用于表示通用的、固定长度的原始二进制数据缓冲区。您不能直接操作数组的内容；相反，您需要创建一个类型化的数组对象或一个以特定格式表示缓冲区的DataView对象，并使用它来读写缓冲区的内容。

除了有符号的8位表示外，您还可以获得各种表示(如float64甚至int32)。表示形式的选择应该无关紧要，因为toString(2)无论如何都会以二进制形式显示它(尽管由于显而易见的原因，二进制字符串的长度肯定会发生变化！)

请注意，在本例中，我选择将整个文件表示为一系列8位整数，即逐字节读取。但是，一般而言，DataView有助于混合同构类型-例如，您可以将前12个字节读取为32位整数，而将其余字节读取为64位。在处理文件时，DataView通常是首选的，因为可以以这种方式处理不同的文件格式，而且DataView还可以处理来自不同体系结构的文件的字节顺序。

像这样的任务可以通过类型化的数组来处理，就像@le_m的答案一样，或者由DataViews来处理-但是，DataViews可以处理字节顺序(如果文件是从不同的CPU通过网络传输的)问题和不同的文件格式(例如，PDF文件，它在主要内容之前有一些字节头)。

Answer 2

您需要遍历数组缓冲区的内容。您可以对此使用DataView或类型化数组。

因为我们将读取单个字节，所以我们不需要担心系统的字节顺序是大是小，并且可以安全地使用允许我们使用Array.reduce()的Uint8Array，以便将所有元素组合成一个二进制字符串。

要将字节转换为二进制，我们可以使用Number.toString(base)方法。

​

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

function fileToBinary(file, callback) {  
  var reader = new FileReader();
  reader.onload = (event) => callback(arrayBufferToBinary(reader.result));
  reader.readAsArrayBuffer(file);
}

var input = document.getElementById("file");
var output = document.getElementById("binary");

input.addEventListener("change", function(event) {
  var file = input.files[0];
  if (file) fileToBinary(file, (binary) => output.textContent = binary);
});

#binary {
  word-wrap: break-word;
}

<input id="file" type="file">
<div id="binary"></div>

​