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.
});
我创建了一个列表视图,当listview上的selectionchange会在Ext.getCmp('displayimage')
上显示图片时。
nodes[0].get("PicData")
是所选图像数据
图像数据是blob值(都是JPEG十六进制值),如何从extjs显示图像?
这是我的displayimage代码
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]
}]
});
将代码更改为
后Ext.getCmp('displayimage').src = 'data:image/jpeg;base64,'+nodes[0].get("PicData") //
Image corrupt or truncated
这是我从firebug得到的错误消息,但我可以肯定我的二进制数据是正确的,因为我已经尝试使用python将其转换为.jpeg文件
这是来自数据库的.jpeg示例blob值(二进制字符串),
http://pastebin.ca/raw/2314500
答案 0 :(得分:1)
假设 Ext.getCmp('displayimage')表示Ext.Img组件,您可以将其“src”属性设置为包含图像数据,但
您必须将其编码为base64,而不是hex
你必须添加一个前缀(例如 data:image / jpeg; base64,,如果图像是Jpeg),表示你将传递实际数据而不是常规网址
所以你应该写一些类似的东西:
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.
});
答案 1 :(得分:1)
需要添加模型方法(并使用转换器从我的回答中提出另一个问题):
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(" ")));
}
jsfiddle 的示例与您的图片&我妻子的照片。