如何将二进制数据显示为图像 - ExtJS 4

Question

这是一个有效的 .JPEG 图像的二进制文件。
http://pastebin.ca/raw/2314500

我尝试使用 Python 将此二进制数据保存为图像。

如何将此数据转换为可查看的 .JPEG 图像并在 extjs 4 ���使用？

我尝试了这个，但它不起作用。

data:image/jpeg;base64,+ binary data

- user2040602

Answer 1

需要将它转换为Base64格式。

JS中有btoa()函数可以实现此功能。

例如：

var img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your-binary-data');
document.body.appendChild(img);

但我认为您在pastebin上的二进制数据无效 - JPEG数据必须以'ffd9'结尾。

更新:

需要编写简单的十六进制到base64转换器:

function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

并使用它：

img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data');

在jsfiddle上查看使用您的十六进制数据的工作示例。

- Vlad

---

二进制数据以ffd9结尾，只需忽略00字节即可。 - user2040602

我已经删除了末尾的00字节，但仍然无法正常工作，无法显示图像。 - user2040602

Jsfiddle正是我所需要的。 - Akin Okegbile

非常感谢@Vlad，我在谷歌上搜索了3天才找到这样的解决方案...它对我来说效果很好...非常感谢...继续加油 \m/ - Rajendra Khabiya

你真的很棒。非常感谢你。 - Apit John Ismail

Answer 2

数据URI格式如下：

data:<headers>;<encoding>,<data>

因此，您只需将数据附加到"data:image/jpeg;,"字符串即可：

var your_binary_data = document.body.innerText.replace(/(..)/gim,'%$1'); // parse text data to URI format

window.open('data:image/jpeg;,'+your_binary_data);

- iegik

Answer 3

在ExtJs中，您可以使用

xtype: 'image'

来渲染一张图片。

这是一个示例，展示了如何使用Extjs渲染二进制数据。

atob --> 将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
            }]
        })
    }
});

https://fiddle.sencha.com/#view/editor&fiddle/28h0

- Saurabh Nemade

Answer 4

在前端JavaScript/HTML中，您可以将二进制文件作为图像加载，无需转换为base64：

<img src="http://engci.nabisco.com/artifactory/repo/folder/my-image">

my-image是一个二进制图像文件。这将加载得很好。

- Alexander Mills

---

问题是关于在没有文件的情况下显示图像。 - Paul Taylor

这是关于显示二进制数据的内容。 - Prathamesh More