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

我使用的GoogleAPI只将图像作为二进制数据传输

我完全不知道如何将它放入一个数据URI来显示它，谢谢你的帮助

我说的电话是

如你所见，上面写着：

服务器返回照片的字节数

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

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

---

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

现在，我不太懂二进制的东西。我猜这是某种编码的二进制数据？我试着把它放到btoa和其他base64编码器中，所有的东西都会抛出一个错误。 我试图用不同的东西覆盖emimetype，“响应”以一些奇怪的方式改变，但没有任何东西接受数据

现在我有了这个代码：

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吗

---

感谢您的帮助

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

使用

仅显示图像。必须用图像的实际编码二进制文件替换

[BASE64编码二进制文件]

。我假设您已经知道如何通过Javascript更改HTML元素属性，将编码的二进制文件放入

“/>

其中，

$result

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

---

我希望这会有所帮助。

如果您使用的是

数据：

URI，我认为您不关心较旧的浏览器。在这种情况下，请按照中的建议使用，然后再使用。

数据：

URI很简单：

数据：image/*；base64，

好的，我找到了解决方案

首先，请求必须将returend类型重写为x-user-defined类型 在这之后，数据不会被浏览器触及

使用以下Base64编码器 最后的代码看起来像这样

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'); 
});

oauth.authorize（函数（）{
var method=“GET”，params={}，url=photo.href；
var nxhr=新的XMLHttpRequest（）；
nxhr.onreadystatechange=函数（数据）{
如果（nxhr.readyState==4）{
控制台日志（“”）；
}
};
打开（方法、url、true）；
setRequestHeader（'GData-Version'，'3.0'）；
nxhr.setRequestHeader（'Authorization'，oauth.getAuthorizationHeader（url、方法、参数））；
nxhr.overrideMemetype（'text\/plain；charset=x-user-defined'）；
});

---

如果你把“数据：图像/*“直接进入浏览器窗口，它将下载文件，但无法打开它。但是如果你把它直接放到一个img src中，它就可以正常工作了

所有其他解决方案都已过时。不需要Base64。查看。

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

步骤1:确保使用自定义的用户定义字符集，以防止浏览器更改内容。e、 g

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

第2步：使用

String.fromCharCode（response.charCodeAt（…）&0xff）

解决

btoa（）

无法处理二进制字符串的问题。这本书的灵感来源于《要点》（目前对我来说，这是一种黑魔法）

结束Eesult:这是一个简化版本。请注意，通常您也会这样做，因为您还需要发送授权头或其他东西，但本例中不包括这一点

var xhr=new XMLHttpRequest（）；
xhr.addEventListener（'readystatechange'，function（）{
var outputEl=document.getElementById（'xhr-output'）；
//完成了吗？
if（this.readyState==4）{
//确保这是一个图像。
var contentType=this.getResponseHeader（'content-type'）；
if（contentType！==null&&contentType.indexOf（'image/'））==0）{
//准备二进制响应，这样我们就可以对其进行base64编码（并且btoa（）函数不会出错）。
//感谢：https://gist.github.com/graylikeme/867848
var response=this.responseText；
var二进制=“”；
对于（i=0；i

binary。。。成千上万个丑陋的角色。。。你知道二进制只有两个值，对吗？FileReader？听起来像是，不是。给我看电影怎么样？否则，我真的不知道你在问什么。@Joseph，也许他真的很讨厌1和0的外观。html5有FileReader；-）是的，约瑟夫，我知道：）但是把二进制数据放到字符串中，你会看到两个以上的值，对吗？当你把二进制数据放到字符串中，它只显示从一系列1字节字符值中提取的字符。如果您将一个4字节的整数存储在某个位置，并尝试通过一个4*1字节的数组读取它，您将得到4个不同的字符。字符串表示不相关，位序列为.AFAIK，Internet Explorer支持自IE7以来的

img数据。IE7应该已经足够大了。另外，btoa（）函数是Gecko DOM的一部分，在IE上不起作用。@Ozbekov:不是
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'); 
});

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