如何将图像二进制文件从 API 调用转换为 Javascript 中的数据 URI？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8394721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I convert image binary from API call to data URI in Javascript?
提问by Luke
The Google API I'm using is transmitting images only as binary data.
我使用的 Google API 仅将图像作为二进制数据传输。
I have absolutly no idea how to put this into a data URI to display it, thanks for any help!
我完全不知道如何将其放入数据 URI 中以显示它，感谢您的帮助！
The call I'm talking about is this API call.
我正在谈论的调用是这个 API 调用。
As you can see, it says:
如您所见，它说：
The server returns bytes of the photo.
服务器返回照片的字节数。
For the call (it's an extension), I use the chrome_ex_oauth methods. Maybe I need to add something into the header to get real binary data, not string as it comes in right now...
对于呼叫（它是一个扩展），我使用 chrome_ex_oauth 方法。也许我需要在标题中添加一些东西来获取真正的二进制数据，而不是现在出现的字符串......
What I need to do is to convert the resulting binary into data URI so I can display it.
我需要做的是将生成的二进制文件转换为数据 URI，以便我可以显示它。
Ok, I get this out of the XHR request
好的，我从 XHR 请求中得到了这个
Now, I dont know binary stuff much. This is somehow encoded binary data i assume? I tried to put this into btoa and other base64 encoders, everything throws an error. I tried to overrideMimeType with different things and the "response" changed in some strange ways, but nothing accepts the data.
现在，我不太了解二进制的东西。我假设这是以某种方式编码的二进制数据？我试图把它放到 btoa 和其他 base64 编码器中，一切都会引发错误。我试图用不同的东西覆盖 MimeType 并且“响应”以一些奇怪的方式改变，但没有任何东西接受数据。
So now I have this code:
所以现在我有这个代码：
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');
Anybody else has any idea how to get this for me not understandable response into a data uri???
其他任何人都知道如何将这个对我来说无法理解的响应转换为数据 uri？？？
Thanks for any help
谢谢你的帮助
采纳答案by Luke
Ok I found the solution...
好的，我找到了解决方案...
First of all, the request must override the returend Type into x-user-defined
首先，请求必须覆盖返回类型为x-user-defined
xhr.overrideMimeType('text\/plain; charset=x-user-defined');
After that the data is untouched by the browser.
之后，浏览器不会触及数据。
Use the following Base64 encoder
使用以下 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;
}
};
There is the magic stuff posted by mozilla which didnt let me encode the stuff correctly
mozilla 发布了一些神奇的东西，它没有让我正确编码这些东西
bytebuffer[jnx] = input.charCodeAt(inx++) & 0xff
The final code would look then like this...
最终的代码看起来像这样......
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');
});
P.S. If you put the "data:image/*" into the browser window directly, it will download the file and would not be able to open it. But if you put it directly into an img src it works fine!
PS 如果直接在浏览器窗口中输入“data:image/*”，会下载文件而无法打开。但是如果你把它直接放到一个 img src 中，它就可以正常工作！
回答by
After conducting some tests, here is my answer:
在进行了一些测试之后，这是我的答案：
To simply display the image using the <img>tag, you must first encode the result binary with Base64. You can do this in two different ways:
要使用<img>标签简单地显示图像，您必须首先使用 Base64 对结果二进制文件进行编码。您可以通过两种不同的方式执行此操作：
Using Javascript:Use a Base64 encoder function, such as this one. After you encode the result binary data, you can display the image using the
<img>tag like so:<img src="data:image/*;base64,[BASE64 ENCODED BINARY]" />. You must replace[BASE64 ENCODED BINARY]with the actual encoded binary of the image. I'm assuming you already know how to change HTML element attributes through Javascript, it's fairly easy to put the encoded binary into thesrcattribute of the<img>tag.Using PHP (my personal preference): Once you submit a GET request to the API, it will return you the binary. Simply use the PHP
base64_encode()function.<img src="data:image/*;base64,<?php echo base64_encode($result); ?>" />
使用 Javascript：使用 Base64 编码器功能，例如这个。您编码结果二进制数据后，您可以使用显示图像
<img>标签，像这样：<img src="data:image/*;base64,[BASE64 ENCODED BINARY]" />。您必须用[BASE64 ENCODED BINARY]图像的实际编码二进制替换。我假设您已经知道如何通过 Javascript 更改 HTML 元素属性，将编码的二进制文件放入标记的src属性中是相当容易的<img>。使用 PHP（我的个人偏好）：一旦您向 API 提交 GET 请求，它就会返回二进制文件。只需使用 PHP
base64_encode()函数即可。<img src="data:image/*;base64,<?php echo base64_encode($result); ?>" />
Where, the $resultvariable is what you get from the API call. You can use the PHP cURLlibrary.
其中，$result变量是您从 API 调用中获得的内容。您可以使用PHP cURL库。
I hope this helps.
我希望这有帮助。
回答by Janus Troelsen
All the other solutions are obsolete. No Base64 is needed. Check out my answer on Getting BLOB data from XHR request.
所有其他解决方案都已过时。不需要 Base64。查看我关于从 XHR 请求获取 BLOB 数据的回答。
回答by Ry-
If you're using a data:URI, I take it you don't care about older browsers. In that case, use btoa()as suggested in How can you encode a string to Base64 in JavaScript?, and fall back on the alternative mentioned in the second answer. Then, the data:URI is simple:
如果您使用的是data:URI，我认为您不关心旧浏览器。在这种情况下，请btoa()按照如何在 JavaScript 中将字符串编码为 Base64 中的建议使用？，并依靠第二个答案中提到的替代方案。然后，data:URI 很简单：
data:image/*;base64,<the btoa output>
