如何将图像二进制从 API 调用转换为 Javascript 中的数据 URI？

Question

我使用的 Google API 仅将图像作为二进制数据传输。

我完全不知道如何将其放入数据 URI 中以显示它，感谢您的帮助！

我说的电话是this API call。

如你所见，上面写着：

服务器返回照片的字节数。

对于调用（它是一个扩展），我使用 chrome_ex_oauth 方法。也许我需要在标题中添加一些东西来获取真正的二进制数据，而不是现在出现的字符串......

我需要做的是将生成的二进制文件转换为数据 URI，以便我可以显示它。

---

好的，我从 XHR 请求中得到了这个

现在，我不太了解二进制的东西。这是我假设的某种编码二进制数据？我试图将它放入 btoa 和其他 base64 编码器中，一切都会引发错误。 我试图用不同的东西覆盖MimeType，并且“响应”以一些奇怪的方式发生了变化，但没有任何东西接受数据。

所以现在我有了这个代码：

var nxhr = new XMLHttpRequest();
nxhr.onreadystatechange = function (data) {
    if (nxhr.readyState == 4) {
        console.log(nxhr);
    }
};
nxhr.open(method, url, true);
nxhr.setRequestHeader('GData-Version', '3.0');
nxhr.setRequestHeader('Authorization', oauth.getAuthorizationHeader(url, method, params));
nxhr.send('Data to send');

任何人都知道如何将这个对我来说无法理解的响应转换为数据 uri？？？

感谢您的帮助

Answer 1

在进行了一些测试后，这是我的答案：

要使用<img> 标记简单地显示图像，您必须首先使用 Base64 对结果二进制文件进行编码。您可以通过两种不同的方式做到这一点：

1. 使用 Javascript： 使用 Base64 编码器函数 such as this one。对结果二进制数据进行编码后，您可以使用<img> 标签显示图像，如下所示：<img src="data:image/*;base64,[BASE64 ENCODED BINARY]" />。您必须将[BASE64 ENCODED BINARY] 替换为图像的实际编码二进制文件。我假设您已经知道如何通过 Javascript 更改 HTML 元素属性，将编码后的二进制文件放入 <img> 标记的 src 属性相当容易。

2. 使用 PHP（我的个人偏好）：一旦您向 API 提交 GET 请求，它就会返回二进制文件。只需使用 PHP base64_encode() 函数即可。

   <img src="data:image/*;base64,<?php echo base64_encode($result); ?>" />

$result 变量是您从 API 调用中获得的。您可以使用PHP cURL 库。

我希望这会有所帮助。

Answer 2

好的，我找到了解决方案...

首先，请求必须将返回的Type覆盖成x-user-defined

xhr.overrideMimeType('text\/plain; charset=x-user-defined');

之后，浏览器不会触及数据。

使用以下 Base64 编码器

Base64 = {

            // private property
            _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

            encodeBinary: function (input) {
                var output = "";
                var bytebuffer;
                var encodedCharIndexes = new Array(4);
                var inx = 0;
                var paddingBytes = 0;

                while (inx < input.length) {
                    // Fill byte buffer array
                    bytebuffer = new Array(3);
                    for (jnx = 0; jnx < bytebuffer.length; jnx++)
                        if (inx < input.length)
                            bytebuffer[jnx] = input.charCodeAt(inx++) & 0xff; // throw away high-order byte, as documented at: https://developer.mozilla.org/En/Using_XMLHttpRequest#Handling_binary_data
                        else
                            bytebuffer[jnx] = 0;

                    // Get each encoded character, 6 bits at a time
                    // index 1: first 6 bits
                    encodedCharIndexes[0] = bytebuffer[0] >> 2;
                    // index 2: second 6 bits (2 least significant bits from input byte 1 + 4 most significant bits from byte 2)
                    encodedCharIndexes[1] = ((bytebuffer[0] & 0x3) << 4) | (bytebuffer[1] >> 4);
                    // index 3: third 6 bits (4 least significant bits from input byte 2 + 2 most significant bits from byte 3)
                    encodedCharIndexes[2] = ((bytebuffer[1] & 0x0f) << 2) | (bytebuffer[2] >> 6);
                    // index 3: forth 6 bits (6 least significant bits from input byte 3)
                    encodedCharIndexes[3] = bytebuffer[2] & 0x3f;

                    // Determine whether padding happened, and adjust accordingly
                    paddingBytes = inx - (input.length - 1);
                    switch (paddingBytes) {
                        case 2:
                            // Set last 2 characters to padding char
                            encodedCharIndexes[3] = 64;
                            encodedCharIndexes[2] = 64;
                            break;
                        case 1:
                            // Set last character to padding char
                            encodedCharIndexes[3] = 64;
                            break;
                        default:
                            break; // No padding - proceed
                    }
                    // Now we will grab each appropriate character out of our keystring
                    // based on our index array and append it to the output string
                    for (jnx = 0; jnx < encodedCharIndexes.length; jnx++)
                        output += this._keyStr.charAt(encodedCharIndexes[jnx]);
                }
                return output;
            }
        };

Mozilla 发布了一些神奇的东西，让我无法正确编码这些东西

bytebuffer[jnx] = input.charCodeAt(inx++) & 0xff

最终的代码将如下所示...

oauth.authorize(function () {
    var method = "GET", params = {}, url = photo.href;

    var nxhr = new XMLHttpRequest();
    nxhr.onreadystatechange = function (data) {
        if (nxhr.readyState == 4) {
            console.log("<img src='data:image/*;base64," + Base64.encodeBinary(nxhr.response) + "' />");
        }
    };
    nxhr.open(method, url, true);
    nxhr.setRequestHeader('GData-Version', '3.0');
    nxhr.setRequestHeader('Authorization', oauth.getAuthorizationHeader(url, method, params));
    nxhr.overrideMimeType('text\/plain; charset=x-user-defined'); 
});

附：如果直接将“data:image/*”放入浏览器窗口，会下载文件，无法打开。但是如果你直接把它放到一个img src中就可以了！

Answer 3

所有其他解决方案都已过时。不需要 Base64。查看my answer on Getting BLOB data from XHR request。

Answer 4

如果您使用data: URI，我认为您不关心旧浏览器。在这种情况下，请按照How can you encode a string to Base64 in JavaScript? 中的建议使用btoa()，然后使用the alternative mentioned in the second answer。然后，data: URI 很简单：

data:image/*;base64,<the btoa output>

Answer 5

我知道这是一个非常古老的问题，但由于这是参考 XHR 上的图像和二进制数据，所以对我来说秘诀在于两个重要步骤：

第 1 步：确保您使用自定义的用户定义字符集，以防止浏览器更改内容。例如

xhr.overrideMimeType('text\/plain; charset=x-user-defined');

第 2 步： 使用 String.fromCharCode(response.charCodeAt(...) & 0xff) 解决 btoa() 无法处理二进制字符串的问题。这是受到要点@https://gist.github.com/graylikeme/867848 的启发（现在对我来说它是黑魔法）。

End Eesult：以下是结果的简化版本。请注意，通常您也会这样做，因为您还需要发送 Authorization 标头或其他内容，但这不包括在此示例中。

<div id="output-el"></div>
<script>
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('readystatechange', function() {
        var outputEl = document.getElementById('xhr-output');

        // Done?
        if (this.readyState === 4) {

            // Make sure this is an image.
            var contentType = this.getResponseHeader('content-type');
            if (contentType !== null && contentType.indexOf('image/') === 0) {
                // Prepare binary response so we can base64 encode it (and btoa() function doesn't freak out).
                // Thanks to: https://gist.github.com/graylikeme/867848
                var response = this.responseText;
                var binary = '';
                for(i=0; i < response.length; i++) {
                    binary += String.fromCharCode(response.charCodeAt(i) & 0xff);
                }

                // Drop into data URI.
                var encoded = btoa(binary);
                outputEl.innerHTML = `<img alt="image preview" src="data:${contentType};base64,${encoded}">`;

            } else {
                console.log('Got a non-image response:', this.responseText);
            }
        }
    });

    // Make sure browser doesn't alter the response before we handle it.
    xhr.overrideMimeType('text\/plain; charset=x-user-defined');
    xhr.open('GET', 'https://example.com/path/to/some/image.jpg');
    xhr.send();
</script>