Extjs 4: display image from blob value Mysql
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['PicID', 'PicUploadedDateTime','PicData']
});
var ImgStore = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'get-image.php',
baseParams: { //here you can define params you want to be sent on each request from this store
mainid: 'value1',
startdate: 'value2',
enddate: 'value3'
},
reader: {
type: 'json',
root: 'images'
}
}
});
var listView = Ext.create('Ext.grid.Panel', {
region: 'west',
id : 'imagelist',
title: 'Select Image',
width: 200,
split: true,
collapsible: true,
floatable: false,
title:'Select Image',
renderTo: Ext.getBody(),
store: ImgStore,
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [
{
text: 'Date Time Uploaded',
//xtype: 'datecolumn',
//format: 'Y-m-d H:i:s',
flex: 65,
width: 100,
dataIndex: 'PicUploadedDateTime'
}]
});
listView.on('selectionchange', function(view, nodes){
Ext.getCmp('displayimage') = nodes[0].get("PicData") // display the image on here
//when listview selected the image,will display the image at here.
});
I am creating a listview when selectionchange in listview shows the image on Ext.getCmp('displayimage')
.
nodes[0].get("PicData")
- selected image data image
data are blob values โโ(all are JPEG hex value), how to display image from extjs?
UPDATE
this is my displayed code
button.on('click', function(){
if (!win) {
win = Ext.create('widget.window', {
title: 'View Image',
closable: true,
closeAction: 'hide',
width: 600,
minWidth: 350,
height: 550,
layout: {
type: 'border',
padding: 5
},
items:[
listView,
{
region: 'center',
//xtype: 'tabpanel',
minheight: 350,
items: [{
//title: 'Bogus Tab',
xtype : 'image',
id : 'displayimage',
}]
},
{
region: 'north',
margin : "5 0 5 0",
//xtype: 'tabpanel',
minheight: 350,
items: [dr]
}]
});
after changing the code to
Ext.getCmp('displayimage').src = 'data:image/jpeg;base64,'+nodes[0].get("PicData") //
Image corrupt or truncated
this is the error message i get from firebug but i am sure my binary data is correct because i tried to use python to convert it to a .jpeg file
this is an example .jpeg blob value (binary string) from database,
http://pastebin.ca/raw/2314500
Need to add to the model methods (and use the converter from my answer to another question):
getImage: function() {
return this.getBase64(this.get('PicData'));
},
getBase64: function(str) {
return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}
Example jsfiddle with your image and my wife's photo.
Assuming your Ext.getCmp ('displayimage') represents the Ext.Img component, you can set its "src" property to store the image data, but
-
it should be base64 encoded, not hex
-
you need to add a prefix (e.g. data: image / jpeg; base64 if the image is Jpeg) indicating that you will pass the actual data instead of the normal url
So, you should write something like:
listView.on('selectionchange', function(view, nodes){
Ext.getCmp('displayimage').src = 'data:image/jpeg;base64,'+nodes[0].get("PicData") // display the image on here
//when listview selected the image,will display the image at here.
});