使用Javascript检索二进制文件内容，对其进行base64编码，然后使用Python进行反向解码

Question

我正在尝试使用最新的Webkit和XMLHttpRequest下载二进制文件，并使用这个简单的函数对其内容进行base64编码：

function getBinary(file){
    var xhr = new XMLHttpRequest();  
    xhr.open("GET", file, false);  
    xhr.overrideMimeType("text/plain; charset=x-user-defined");  
    xhr.send(null);
    return xhr.responseText;
}

function base64encode(binary) {
    return btoa(unescape(encodeURIComponent(binary)));
}

var binary = getBinary('http://some.tld/sample.pdf');
var base64encoded = base64encode(binary);

作为一个旁注，以上所有内容都是标准的Javascript知识，包括btoa()和encodeURIComponent()：https://developer.mozilla.org/en/DOM/window.btoa 这个过程非常顺利，我甚至可以使用Javascript解码base64内容：

function base64decode(base64) {
    return decodeURIComponent(escape(atob(base64)));
}

var decodedBinary = base64decode(base64encoded);
decodedBinary === binary // true

现在，我想使用Python解码base64编码的内容，需要使用一些JSON字符串来获取base64encoded字符串值。这是我最初的做法：

import urllib
import base64
# ... retrieving of base64 encoded string through JSON
base64 = "77+9UE5HDQ……………oaCgA="
source_contents = urllib.unquote(base64.b64decode(base64))
destination_file = open(destination, 'wb')
destination_file.write(source_contents)
destination_file.close()

但是生成的文件无效，看起来操作与UTF-8编码或其他什么东西搞砸了。

如果我在将UTF-8内容放入目标文件之前尝试进行解码，则会引发错误：

import urllib
import base64
# ... retrieving of base64 encoded string through JSON
base64 = "77+9UE5HDQ……………oaCgA="
source_contents = urllib.unquote(base64.b64decode(base64)).decode('utf-8')
destination_file = open(destination, 'wb')
destination_file.write(source_contents)
destination_file.close()

$ python test.py
// ...
UnicodeEncodeError: 'ascii' codec can't encode character u'\ufffd' in position 0: ordinal not in range(128)

作为附注，这是同一文件的两个文本表示的屏幕截图；左边是原始的，右边是从base64解码字符串创建的：http://cl.ly/0U3G34110z3c132O2e2x 在尝试重新创建文件时，有没有已知的技巧可以避免这些编码问题？您将如何实现这一点？

任何帮助或提示都会受到高度赞赏 :)

- NiKo

---

顺便提一下，我尝试使用“utf-8”编解码器在目标文件中写入内容，但是也没有成功。不过这可能是我在某个地方搞错了什么。 - NiKo

这很奇怪，因为 \ufffd 是非常特殊的：http://www.fileformat.info/info/unicode/char/fffd/index.htm - rocksportrocker

@rocksportrocker> иҝҷж„Ҹе‘ізқҖжҲ‘жӯЈеңЁдҪҝз”Ёзҡ„base64encode()еҮҪж•°ж— жі•иҪ¬жҚўжҹҗдәӣеӯ—з¬Ұ...еҘҮжҖӘзҡ„жҳҜпјҢеҸҚеҗ‘ж“ҚдҪңеңЁjavascriptдёӯе®ҢзҫҺиҝҗиЎҢ... - NiKo

你尝试过在不同步骤转储前几个字节的值吗？看起来你的某个库太聪明了，没有按字节级别进行转换。我建议创建一个简单的UTF-8文本文件，其中包含>255个代码点，并手动分析每个步骤的字节值。你应该在出错的地方停下来。 - Vincent Robert

很遗憾，我没有使用任何库... JS的一些东西（btoa()、encodeURIComponent()和unescape()）是标准的。Python部分也是如此，除了stdlib之外没有其他东西被使用...我将研究一下奇怪的字节值，但这看起来会非常麻烦:( - NiKo

Answer 1

我现在回答自己的问题，为此我很抱歉，但我认为这可能对一些像我一样迷失的人有用；)

所以你需要使用ArrayBuffer并设置XMLHttpRequest对象实例的responseType属性为arraybuffer来检索字节的本地数组，该数组可以使用以下方便的函数（找到那里，作者也许会在这里受到祝福）转换为base64：

function base64ArrayBuffer(arrayBuffer) {
  var base64    = ''
  var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

  var bytes         = new Uint8Array(arrayBuffer)
  var byteLength    = bytes.byteLength
  var byteRemainder = byteLength % 3
  var mainLength    = byteLength - byteRemainder

  var a, b, c, d
  var chunk

  // Main loop deals with bytes in chunks of 3
  for (var i = 0; i < mainLength; i = i + 3) {
    // Combine the three bytes into a single integer
    chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]

    // Use bitmasks to extract 6-bit segments from the triplet
    a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
    b = (chunk & 258048)   >> 12 // 258048   = (2^6 - 1) << 12
    c = (chunk & 4032)     >>  6 // 4032     = (2^6 - 1) << 6
    d = chunk & 63               // 63       = 2^6 - 1

    // Convert the raw binary segments to the appropriate ASCII encoding
    base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
  }

  // Deal with the remaining bytes and padding
  if (byteRemainder == 1) {
    chunk = bytes[mainLength]

    a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2

    // Set the 4 least significant bits to zero
    b = (chunk & 3)   << 4 // 3   = 2^2 - 1

    base64 += encodings[a] + encodings[b] + '=='
  } else if (byteRemainder == 2) {
    chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]

    a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
    b = (chunk & 1008)  >>  4 // 1008  = (2^6 - 1) << 4

    // Set the 2 least significant bits to zero
    c = (chunk & 15)    <<  2 // 15    = 2^4 - 1

    base64 += encodings[a] + encodings[b] + encodings[c] + '='
  }

  return base64
}

所以这是一个可工作的代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://some.tld/favicon.png', false);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
    console.log(base64ArrayBuffer(e.currentTarget.response));
};
xhr.send();

这将记录一个有效的Base64编码的字符串，表示二进制文件内容。

编辑：对于没有访问ArrayBuffer并且在编码字符上失败的旧浏览器，这里有另一种获取任何二进制的Base64编码版本的方法。

function getBinary(file){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", file, false);
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    xhr.send(null);
    return xhr.responseText;
}

function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;
    while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt((c1 & 0x3) << 4);
            out += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
            out += CHARS.charAt((c2 & 0xF) << 2);
            out += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        out += CHARS.charAt(c1 >> 2);
        out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += CHARS.charAt(c3 & 0x3F);
    }
    return out;
}

console.log(base64Encode(getBinary('http://www.google.fr/images/srpr/logo3w.png')));

希望这能像对我一样，帮助到其他人。

- NiKo

---

第二个解决方案（“适用于旧版浏览器”）在phantomjs（webkit）中有效。非常感谢 :) - oxygen

非常感谢您关于旧版浏览器的编辑，谢谢，谢谢，谢谢！我可以保证，在寻找答案并最终找到它的过程中，我的兴奋情绪不断上升！拥抱 - sjngm

IE似乎完全没有overrideMimeType，而responseType是IE10+。有没有IE9的解决方案？ - thomthom

你如何解码base64为二进制？看起来atob和btoa产生了相同的错误... - AKFourSeven

这对通过base64嵌入字体文件非常有帮助！ - nardeas

那个第一个函数会抛出一个错误，因为它是同步运行的，更多信息请参见：https://dev59.com/CGkw5IYBdhLWcg3wfKrZ - Julian K