plupload预览图片有多种方法,主要由moxie的Image提供,Image的downsize、crop、embed都可用来预览图片
1.downsize
最开始做项目的时候,我用的就是downsize来做预览图片
downsize(opts)
Downsizes the image to fit the specified width/height. If crop is supplied, image will be cropped to exact dimensions.
Arguments
-
-
opts
Object
- width
Number
Resulting width - [height=width]
Number
Resulting height (optional, if not supplied will default to width) - [crop=false]
Boolean
Whether to crop the image to exact dimensions - [preserveHeaders=true]
Boolean
Whether to preserve meta headers (on JPEGs after resize) - [resample=false]
String
Resampling algorithm to use for resizing
- width
-
这个参数说明大家应该都能看懂,按照上面的参数说明,我写下如下预览代码
1 var img = new o.Image(); 2 3 img.onload = function() { 4 // create a thumb placeholder 5 var li = document.createElement('li'); 6 li.id = this.uid; 7 document.getElementById('gallery').appendChild(li); 8 this.downsize(100,60,true); 9 li.innerHTML = '<img src="'+this.getAsDataURL() +'"/>'; 10 }; 11 img.onerror = function(){ 12 alert('Error'); 13 }; 14 img.load(file.getSource());
细心的园友会发现上面的代码在ie6下无效,这里是通过获得图片的base64编码,来实现预览,而datauri在ie6下是无效的,而问题不仅仅是这个,我在ie7-9下运行,出现了像素比较低的情况,给大家看下效果
够恶心的吧,然后我通过判断当前runtime,如果是html5,则可预览,若不是,上传完成后再显示图片。虽然是一种退化方案,但不够,用户体验不好
2.crop
crop是downsize(width, height, true)的别名,就不介绍了。
3.embed
embed(el, [opts], [type="image/jpeg"], [quality=90], [crop=false])
Embeds a visual representation of the image into the specified node. Depending on the runtime, it might be a canvas, an img node or a thrid party shim object (Flash or SilverLight - very rare, can be used in legacy browsers that do not have canvas or proper dataURI support).
Arguments
-
- el
DOMElement
DOM element to insert the image object into -
[opts]
Object
- [width]
Number
The width of an embed (defaults to the image width) - [height]
Number
The height of an embed (defaults to the image height)
- [width]
- [type="image/jpeg"]
String
Mime type - [quality=90]
Number
Quality of an embed, if mime type is image/jpeg - [crop=false]
Boolean
Whether to crop an embed to the specified dimensions
- el
embed方法由canvas,datauri,shim逐层退化,可兼容到ie6,这里有个shim,开始也不明白什么意思,查阅资料后知晓
shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现
这里的参数说明也很清晰,我又写下了如下代码
1 var img = new o.Image(); 2 3 img.onload = function() { 4 // create a thumb placeholder 5 var li = document.createElement('li'); 6 li.id = this.uid; 7 document.getElementById('gallery').appendChild(li); 8 9 // embed the actual thumbnail 10 this.embed(li.id, { 11 width: 100, 12 height: 60, 13 crop: true 14 }); 15 }; 16 17 img.onerror = function(){ 18 alert('Error'); 19 }; 20 img.load(file.getSource());
大家可能拿着上述代码去运行,会发现ie6依然不能预览图片(楼主你这不是忽悠人吗),大家莫急。
去看了下embed的源码,
1 tr.transport(Encode.atob(dataUrl.substring(dataUrl.indexOf('base64,') + 7)), type, Basic.extend({}, options, { 2 required_caps: { 3 display_media: true 4 }, 5 runtime_order: 'flash,silverlight', 6 container: el 7 }));
这里提到了flash,我在想会不会跟moxie.swf有关,我修改了下代码,ie6下运行正常
var img = new o.Image();
img.onload = function() {
// create a thumb placeholder
var li = document.createElement('li');
li.id = this.uid;
document.getElementById('gallery').appendChild(li);
// embed the actual thumbnail
this.embed(li.id, {
width: 100,
height: 60,
crop: true,
swf_url: o.resolveUrl(up.getOption('swf_url'))
});
};
img.onerror = function(){
alert('Error');
};
img.load(file.getSource());
这里将swf的路径转化为绝对路径才有效。
WEB开发中常用的图片格式有jpg、png、gif.
但经我测试,我说的上述两种方式,均不能预览gif.
去查看Image的文档,明确说明只适用于jpg、png。
开始我考虑能不能取gif的第一帧来作为预览图呢,想法很好,但没找到相关资料,只能想其他方法
我先利用html5的filereader读取gif的datauri,发现在支持html5的浏览器下可预览gif。有总比没有好,moxie也提供了filereader的shim.自己调试了一番,实现了gif的预览(支持ie7+),遗憾的是不支持ie6
if(file.type == 'image/gif'){
var preloader = new mOxie.FileReader();
var image = $(new Image()).appendTo($('#pic_'+file.id));
preloader.onload = function(e){
image.prop('src',e.target.result);
}
preloader.onerror = function(e){
this.destroy();
}
preloader.onloadend = function(e){
this.destroy();
}
preloader.readAsDataURL(file.getSource());
}else{
var preloader = new mOxie.Image();
preloader.onload = function() {
this.embed('pic_'+file.id, {
width: 96,
height: 96,
crop:true,
swf_url: o.resolveUrl(up.getOption('swf_url'))
});
};
preloader.onembedded = function(){
this.destroy();
};
preloader.load(file.getSource());
}
能力有限,文中若有不对的地方,望指正。