如何将图像文件转换为 base 2 二进制文件？

Question

我正在尝试这样做：

function handleFiles(files) {
  var selectedFile = files[0];
  var reader = new FileReader();
  reader.readAsBinaryString(selectedFile);
  reader.onloadend = function() {
    var result = reader.result;
    convert(result);
  };
}

function convert(data) {
  var img = document.createElement("img");
  var result = data.toString(2);
  
  document.body.appendChild(img);
  img.src = 'data:image/jpeg;base64,' + btoa(data); // this works
  
  console.log("Base ?: " + data); // not sure, I think 16 or more likely 64, 
                                  // the MDN documentation doesn't specify what base of binary is produced by the readAsBinaryString method
  console.log("Base 2: " + result); // not base 2 binary data as expected
}

<input type="file" id="input" onchange="handleFiles(this.files)">

此代码会将 jpeg 转换为二进制数据，然后对其进行渲染，但它不是首先转换为 base 2 二进制。如果您运行该代码并查看日志，那就更多了（我对基数和二进制的主题很天真，但我的猜测是基数 16 或 64）。我认为toString(2) 应该转换为base 2，但它似乎没有这样做。在将其转换回基数 64 之前，我想将二进制数据转换为基数 2 进行实验。

Answer 1

你不能单步遍历你的二进制字符串并将每个字符转换为二进制表示吗？

function convert(data) { 
    var result = ''
    for (let i = 0; i < data.length; i++){
        result += data.charCodeAt(i).toString(2)
    }
    console.log(result)
  }

[我会先用一个小文件来测试它。正如你想象的那样，它会向控制台写入很多内容]

编辑——抱歉，没有意识到你想来回走动。如果您想从二进制字符串返回到其他内容，您可能需要用零填充二进制文件，以便一次提取 8 位（或其他）：

function convert(data) {
    var result = ''
    for (let i = 0; i < data.length; i++){
       // pad to make all binary string parts 8 bits long 
       result += data.charCodeAt(i).toString(2).padStart(8, 0)
    }
    return result
    }

function makeBuffer(string){
    buffer = ''
    for(let i = 0; i < string.length/8; i++){
        let stIdx = i*8
        // maybe a way to do this without the slice? dunno.
        buffer += String.fromCharCode(parseInt(string.slice(stIdx,stIdx+8), 2))
    }
    return buffer
}

Answer 2

二进制总是以 2 为底，这就是“二进制”中的“bi”的意思。

当您调用fileReader.readAsBinaryString() 时，它会返回二进制文件；字符串可以存储二进制，因为它们实际上只是一个字符数组。

显示字符串将不是是一系列的 0 和 1，它将是不同 ASCII 字符（字母、数字、符号等）的混杂，因为这些是匹配的等效字符二进制值。

此外，您不需要以下行，因为您传入的 data 已经是一个字符串。

var result = data.toString(2);