extjs4:显示Mysql blob值中的图像
extjs 4 : display image from Mysql blob value
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,当在listview上选择change时,将在Ext.getCmp('displayimage')
上显示图像。
nodes[0].get("PicData")
是所选的图像数据
图像数据都是blob值(都是JPEG十六进制值(,如何从extjs中显示图像?
更新
这是我的显示图像代码
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
需要添加模型方法(并使用我对您的另一个问题的回答中的转换器(:
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上的示例以及您的图像&我妻子的照片。
假设Ext.getCmp('displayimage'(表示Ext.Img组件,您可以将其"src"属性设置为包含图像数据,但
-
您必须将其编码为base64,而不是十六进制
-
您必须添加一个前缀(例如data:image/jpeg;base64,如果图像是jpeg图像(,指示您将传递实际数据,而不是常规的Url
所以你应该写这样的东西:
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.
});
相关文章:
- 使用blob作为src图像
- 图像Blob>上传后是其大小的50倍
- 从火狐中的 blob 下载图像
- 画布图像到blob,更改图像大小
- PHP FTP上传BLOB TEMP图像
- 在消耗大量内存后,浏览器在创建图像Blob的ObjectURL时抛出错误
- 将画布图像作为多部分/表单数据类型的 Blob 上传到 facebook
- 使用 JavaScript 和 websocket 显示来自 blob 的图像
- 在 JavaScript 中编辑 blob 图像(调整大小并添加边框)
- 加载更多包含 blob 图像的项目
- 图像加载不适用于 img 和 Blob
- 将来自 SalesForce 的图像作为 blob 进行查询
- 将图像保存到Webkit和Gecko中的blob
- Javascript-将图像文件写入blob(html5文件api)
- 从js上传一个图像文件到azure blob存储
- 在信息窗口谷歌地图上显示BLOB数据中的图像
- 使用jQuery's的ajax方法将图像检索为blob
- Worklight从mysql获取图像blob
- 在HTML中检索MySQL图像Blob
- Phonegap拍摄照片并将图像(BLOB)插入数据库SQLite