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

Question

对于一个小项目，我想将图像转换为二进制表示形式(零和一)。因为我想在未配置为运行 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 中的字节位置(这里为 0，传入的值)中的数据转换为带符号的 8 位整数表示形式，以及 toString(2) 将 8 位整数转换为二进制表示格式(即 1 和 0 的字符串)。

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

---

除了类型化数组之外，这就是 recommended way从 ArrayBuffer 读/写:

The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. You cannot directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

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

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

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