Jak wyświetlić dane binarne jako obraz-extjs 4

Tutaj jest binarny dla valid .Obraz JPEG.
http://pastebin.ca/raw/2314500

Próbowałem użyć Pythona, aby zapisać te dane binarne do obrazu.

Jak mogę przekonwertować te dane do widoku.Obraz JPEG z extjs 4?

Próbowałem tego, ale nie działa.
data:image/jpeg;base64,+ binary data
Author: goldie, 2013-02-17

4 answers

Trzeba przekonwertować w base64.

JS mają dla niego funkcję btoa ().

Na przykład:

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

Ale myślę, że Twoje dane binarne w pastebinie są nieprawidłowe - dane jpeg muszą być zakończone na 'ffd9'.

Update:

Trzeba napisać prosty hex do konwertera 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(" ")));
}

I użyj go:

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

Zobacz przykład pracy z danymi szesnastkowymi na jsfiddle

 48
Author: Vlad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-17 08:21:00

Format Uri danych to:

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

Tak, trzeba tylko dołączyć swoje dane do" data:image/jpeg;, " ciąg:

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

window.open('data:image/jpeg;,'+your_binary_data);
 1
Author: iegik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-01 13:57:48

W ExtJs możesz użyć

Xtype: 'image'

Aby renderować obraz.

Oto fiddle pokazujące renderowanie danych binarnych za pomocą extjs.

Atob -- > konwertuje ascii na binarne

Btoa -- > konwertuje binarne do 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

 0
Author: Saurabh Nemade,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-18 04:47:04

W interfejsie JavaScript / HTML, możesz załadować plik binarny jako obraz, nie musisz konwertować do base64:

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

My-image jest binarnym plikiem obrazu. To się załaduje.

 -1
Author: Alexander Mills,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-19 18:32:22