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

Question

Oto plik binarny dla poprawnego obrazu .JPEG.
http://pastebin.ca/raw/2314500

Próbowałem użyć Pythona do zapisania danych binarnych w obrazie.

Jak mogę przekonwertować te dane na widoczny obraz .JPEG z extjs 4?

Próbowałem tego, ale to nie działa.

data:image/jpeg;base64,+ binary data 

Answer 1

trzeba konwertować go 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 to, co twoje dane binarne w pastebin jest nieprawidłowa - dane jpeg musi być zakończony „ffd9”.

Aktualizacja:

trzeba napisać prosty hex konwerter 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żywać go:

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

Zobacz przykład pracy z danymi sześciokątnych na jsfiddle

Answer 2

da Format ta URI jest:

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

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

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

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

Answer 3

W front-end JavaScript/HTML, możesz załadować plik binarny jako obraz, nie musisz konwertować na base64:

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

my-image to plik obrazu binarnego. To ładuje się dobrze.

Answer 4

W ExtJS można użyć

xtype: 'obraz'

do renderowania obrazu.

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

atob -> konwertuje ASCII na binarny

btoa -> konwertuje binarnego na 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