Как отобразить двоичные данные как изображение - extjs 4

Вот двоичный файл для действительного изображения .JPEG.
http://pastebin.ca/raw/2314500

Я попытался использовать Python для сохранения этих двоичных данных в изображении.

Как я могу преобразовать эти данные в изображение с видимым .JPEG с помощью extjs 4?

Я пробовал это, но он не работает.

data:image/jpeg;base64,+ binary data

Ответы

Ответ 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'.

Update:

Вам нужно написать простой конвертер hex-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

Ответ 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);

Ответ 3

В интерфейсе JavaScript/HTML вы можете загружать двоичный файл в виде изображения, вам не нужно преобразовывать его в base64:

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

my-image - это файл двоичного изображения. Это будет очень просто загружаться.

Ответ 4

В 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