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.
source to share
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.
});
source to share