plupload上传前预览图片

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

这个参数说明大家应该都能看懂,按照上面的参数说明，我写下如下预览代码

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);
       this.downsize(100,60,true);
       li.innerHTML = '<img src="'+this.getAsDataURL() +'"/>';
 };
 img.onerror = function(){
                        alert('Error');
                   };
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)
• [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

embed方法由canvas,datauri,shim逐层退化，可兼容到ie6,这里有个shim,开始也不明白什么意思，查阅资料后知晓

shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现

这里的参数说明也很清晰，我又写下了如下代码

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, {
                            100,
                           height: 60,
                           crop: true
                       });
            };
                    
           img.onerror = function(){
                    alert('Error');
                };
          img.load(file.getSource());

大家可能拿着上述代码去运行，会发现ie6依然不能预览图片（楼主你这不是忽悠人吗），大家莫急。

去看了下embed的源码，

      tr.transport(Encode.atob(dataUrl.substring(dataUrl.indexOf('base64,')     + 7)), type, Basic.extend({}, options, {
                            required_caps: {
                                display_media: true
                            },
                            runtime_order: 'flash,silverlight',
                            container: el
                        }));    

这里提到了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, {
                             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, {
                 96,
                height: 96,
                crop:true,
                swf_url: o.resolveUrl(up.getOption('swf_url'))
            });
        };
        preloader.onembedded = function(){
            this.destroy();
        };
        preloader.load(file.getSource());
}

能力有限，文中若有不对的地方，望指正。