javascript - 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

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(/
|
/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