Search code examples
javascriptajaxextjsextjs4

How to display binary data as image - extjs 4

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
Solution

  • 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