How to display binary data as image - extjs 4

Question

Here is the binary for a valid .JPEG image.
http://pastebin.ca/raw/2314500

I have tried to use Python to save this binary data into an image.

How can I convert this data to a viewable .JPEG image with extjs 4?

I tried this, but it doesn't work.

data:image/jpeg;base64,+ binary data

Marybelle

Answer 1

Need to convert it in base64.

JS have btoa() function for it.

For example:

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

But i think what your binary data in pastebin is invalid - the jpeg data must be ended on 'ffd9'.

Update:

Need to write simple hex to base64 converter:

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

And use it:

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

See working example with your hex data on jsfiddle

Septal

ya.the binary data are end with ffd9,just ignore the 00 bytes – Marybelle

i have delete the end of 00 bytes,but still can't work,can't display image – Marybelle

thanks @Septal ! i never found this kind of solution on google.com thanks a lot ! – Marybelle

Jsfiddle is Exactly what I needed – Izolaiztaccihuatl

Thank you very much @Septal i am searching on goggle from last 3 days for such solution.. it works for me as expected.. thanks a lot.. keep rocking \m/ – Vizcacha

You are truly awesome. Thank you very much – Octavia

That's nice, but performance costly if done in a highly refreshed part of the UI. Any way to avoid base64 ? – Pulpwood

Is there a way to send binary image data without converting it to a string? – Vertebrate

Answer 2

The data URI format is:

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

So, you need only append your data to the "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);

Permatron

Answer 3

In ExtJs, you can use

xtype: 'image'

to render a image.

Here is a fiddle showing rendering of binary data with extjs.

atob -- > converts ascii to binary

btoa -- > converts binary to 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

Rosaceous

Answer 4

In front-end JavaScript/HTML, you can load a binary file as an image, you do not have to convert to base64:

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

my-image is a binary image file. This will load just fine.

Racket

The question is about displaying an image when it isn't in a file – Pandit

This about displaying binary data – Oria