How to display binary data as image - extjs 4
Solution 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
Solution 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);
Solution 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
Admin
Updated on July 03, 2020Comments
-
Admin almost 4 years
Here is the binary for a valid .JPEG image.
http://pastebin.ca/raw/2314500I 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
-
Admin over 11 yearsya.the binary data are end with ffd9,just ignore the 00 bytes
-
Admin over 11 yearsi have delete the end of 00 bytes,but still can't work,can't display image
-
Admin over 11 yearsthanks @Vlad ! i never found this kind of solution on google.com thanks a lot !
-
Akin Okegbile over 10 yearsJsfiddle is Exactly what I needed
-
Marcel Popescu over 10 yearsThanks for the fiddle!
-
Rajendra Khabiya about 9 yearsThank you very much @Vlad i am searching on goggle from last 3 days for such solution.. it works for me as expected.. thanks a lot.. keep rocking \m/
-
Apit John Ismail over 6 yearsYou are truly awesome. Thank you very much
-
Paul Taylor about 6 yearsThe question is about displaying an image when it isn't in a file
-
Starscream over 5 yearsThat's nice, but performance costly if done in a highly refreshed part of the UI. Any way to avoid base64 ?
-
Prathamesh More about 4 yearsThis about displaying binary data
-
trusktr about 4 yearsIs there a way to send binary image data without converting it to a string?