标签：
plupload预览图片有多种方法，主要由moxie的Image提供，Image的downsize、crop、embed都可用来预览图片
1.downsize
最开始做项目的时候，我用的就是downsize来做预览图片
Downsizes the image to fit the specified width/height. If crop is supplied, image will be cropped to exact dimensions.
Arguments
opts Object
NumberNumberBooleanBooleanString这个参数说明大家应该都能看懂,按照上面的参数说明，我写下如下预览代码
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
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
DOMElement[opts] Object
NumberNumberStringNumberBooleanembed方法由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());
}
能力有限，文中若有不对的地方，望指正。
标签：
原文地址：http://www.cnblogs.com/mingao/p/4954324.html
