Javascript 如何将二进制数据显示为图像 - extjs 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14915058/
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 to display binary data as image - extjs 4
提问by Vlad
Here is the binary for a valid .JPEG image.http://pastebin.ca/raw/2314500
这是有效 .JPEG 图像的二进制文件。http://pastebin.ca/raw/2314500
I have tried to use Python to save this binary data into an image.
我曾尝试使用 Python 将此二进制数据保存到图像中。
How can I convert this data to a viewable .JPEG image with extjs 4?
如何使用 extjs 4 将此数据转换为可查看的 .JPEG 图像？
I tried this, but it doesn't work.
我试过这个，但它不起作用。
data:image/jpeg;base64,+ binary data
回答by Vlad
Need to convert it in base64.
需要将其转换为 base64。
JS have btoa() function for it.
JS 有 btoa() 函数。
For example:
例如：
var img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your-binary-data');
document.body.appendChild(img);
But i think what your binary data in pastebin is invalid - the jpeg data must be ended on 'ffd9'.
但我认为你在 pastebin 中的二进制数据是无效的——jpeg 数据必须以“ffd9”结尾。
Update:
更新：
Need to write simple hex to base64 converter:
需要编写简单的十六进制转 base64 转换器：
function hexToBase64(str) {
return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x ").replace(/ +$/, "").split(" ")));
}
And use it:
并使用它：
img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data');
See working example with your hex data on jsfiddle
在jsfiddle上查看带有十六进制数据的工作示例
回答by iegik
The data URI format is:
数据URI格式为：
data:<headers>;<encoding>,<data>
data:<headers>;<encoding>,<data>
So, you need only append your data to the "data:image/jpeg;," string:
因此，您只需将数据附加到“data:image/jpeg;”字符串中：
var your_binary_data = document.body.innerText.replace(/(..)/gim,'%'); // parse text data to URI format
window.open('data:image/jpeg;,'+your_binary_data);
回答by Saurabh Nemade
In ExtJs, you can use
在 ExtJs 中，您可以使用
xtype: 'image'
xtype: '图像'
to render a image.
渲染图像。
Here is a fiddle showing rendering of binary data with extjs.
这是一个显示使用 extjs 呈现二进制数据的小提琴。
atob -- > converts ascii to binary
atob --> 将 ascii 转换为二进制
btoa -- > converts binary to ascii
btoa --> 将二进制转换为 ascii
Ext.application({
name: 'Fiddle',
launch: function () {
var srcBase64 = "data:image/jpeg;base64," + btoa(atob("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8H8hYDwAFegHS8+X7mgAAAABJRU5ErkJggg=="));
Ext.create("Ext.panel.Panel", {
title: "Test",
renderTo: Ext.getBody(),
height: 400,
items: [{
xtype: 'image',
width: 100,
height: 100,
src: srcBase64
}]
})
}
});
回答by Alexander Mills
In front-end JavaScript/HTML, you can load a binary file as an image, you do not have to convert to base64:
在前端 JavaScript/HTML 中，可以将二进制文件加载为图片，无需转换为 base64：
<img src="http://engci.nabisco.com/artifactory/repo/folder/my-image">
my-image is a binary image file. This will load just fine.
my-image 是一个二进制图像文件。这将加载得很好。
