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

Posted 2023-02-27

【中文标题】使用 Javascript 检索二进制文件内容，base64 对其进行编码并使用 Python 对其进行反向解码

【英文标题】：Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python

【发布时间】：2011-11-14 07:36:57

【问题描述】：

我正在尝试使用 XMLHttpRequest（使用最近的 Webkit）下载二进制文件，并使用这个简单的函数对其内容进行 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

在尝试重新创建文件时，是否有已知的技巧来规避这些编码问题？您自己将如何实现这一目标？

非常感谢任何帮助或提示:)

【问题讨论】：

作为旁注，我尝试使用codecs 模块来使用'utf-8'编解码器编写目标文件，但也没有运气，但我可能在某个地方搞砸了.

这很奇怪，因为 \ufffd 很特别：fileformat.info/info/unicode/char/fffd/index.htm

@rocksportrocker> 那会假设我正在使用的base64encode() 函数无法转换某些字符......奇怪的是反向操作在javascript中完美运行......

您是否尝试在不同的步骤中转储第一个字节值。看起来一个或您的库太聪明了，没有在字节级别进行转换。我建议创建一个具有 >255 个代码点的简单 UTF-8 文本文件，并在每一步手动分析字节值。你应该在错误的地方停下来。

不幸的是，我没有使用任何库……JS 的东西（btoa()、encodeURIComponent() 和unescape()）是标准的。 Python 部分也是如此，除了 stdlib 使用的东西……我将使用奇怪的 Bytes 值进行调查，这看起来真的很痛苦:(

【参考方案1】：

所以我在回答自己——对此感到抱歉——但我认为这对像我这样迷失的人可能有用；）

所以你必须使用ArrayBuffer 并将XMLHttpRequest 对象实例的responseType 属性设置为arraybuffer 以检索字节的本机数组，可以使用以下便捷函数将其转换为base64（找到there，作者在这里可能有福了）：

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 并且 btoa() 编码字符失败的旧浏览器，这是获取任何二进制文件的 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')));

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

【讨论】：

第二种解决方案（“对于旧版浏览器”）适用于 phantomjs（webkit）。非常感谢:)

谢谢，谢谢，谢谢，谢谢您对旧浏览器的编辑！我可以向你保证，随着寻找答案然后找到答案的时间，兴奋感会越来越大！ *拥抱*

IE 似乎根本没有overrideMimeType，而responseType 是IE10+。 IE9 有什么解决方案吗？

那么你将如何将 base64 解码为二进制文件？似乎 atob 产生与 btoa 相同的失败......

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