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
This question is related to
javascript
ajax
extjs
extjs4
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.
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);
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
}]
})
}
});
Source: Stackoverflow.com