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

Question

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

我绝对不知道如何将它放入数据URI中来显示它,感谢您的帮助!

我正在谈论的是这个API调用.

如你所见,它说:

服务器返回照片的字节.

对于调用(它是扩展),我使用chrome_ex_oauth方法.也许我需要在标题中添加一些内容来获取真正的二进制数据,而不是现在出现的字符串......

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

---

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

现在,我不太了解二进制的东西.这是以某种方式编码的二进制数据我假设？我试图把它放到btoa和其他base64编码器中,一切都会引发错误.我试图用不同的东西覆盖MySQL类型,并且以某些奇怪的方式改变了"响应",但没有接受数据.

所以现在我有这个代码:

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编码器功能,例如此功能.对结果二进制数据进行编码后,可以使用<img>标签显示图像,如下所示:<img src="data:image/*;base64,[BASE64 ENCODED BINARY]" />.您必须替换[BASE64 ENCODED BINARY]为图像的实际编码二进制文件.我假设您已经知道如何通过Javascript更改HTML元素属性,将编码的二进制文件放入标记的src属性中相当容易<img>.

2. 使用PHP(我的个人偏好):一旦你向API提交GET请求,它将返回二进制文件.只需使用PHP base64_encode()函数.

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

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

我希望这有帮助.

Answer 2

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

首先,请求必须将returend 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'); 
});

PS如果您直接将"data:image/*"放入浏览器窗口,它将下载该文件,但无法打开它.但是如果你把它直接放到img src中就行了!