如何将二进制数据显示为图像 - extjs 4答案

【问题标题】：How to display binary data as image - extjs 4如何将二进制数据显示为图像 - extjs 4
【发布时间】：2013-02-01 15:06:44
【问题描述】：

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

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

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

我试过了，但它不起作用。

data:image/jpeg;base64,+ binary data

【问题讨论】：

标签： javascript ajax extjs extjs4

【解决方案1】：

在 ExtJs 中，可以使用

xtype: '图片'

渲染图像。

这是一个使用 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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

问题是关于显示不在文件中的图像
关于显示二进制数据

【解决方案3】：

数据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);

【讨论】：

【解决方案4】：

需要转换成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上查看使用十六进制数据的工作示例

【讨论】：

ya.二进制数据以ffd9结尾，忽略00字节
我已经删除了00字节的结尾，但仍然无法使用，无法显示图像
感谢@Vlad！我从来没有在 google.com 上找到过这种解决方案，非常感谢！
Jsfiddle 正是我所需要的
感谢您的提琴！