【AlphaImageLoader滤镜】
filter模式使用的是AlphaImageLoader滤镜。 它的作用是在对象容器边界内,在对象的背景和内容之间显示一张图片。 如果载入的是png图片,其透明度会被支持,可以用来解决png的兼容问题。 详细参考msdn的AlphaImageLoader Filter和“Microsoft.AlphaImageLoader滤镜讲解”。 它包括三个属性:enabled(滤镜是否激活),sizingMethod(图像显示方式)和src(图像路径)。 程序主要使用后面两个属性。
sizingMethod有三种方式:
- crop:剪切图片以适应对象尺寸;
- image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸;
- scale:缩放图片以适应对象的尺寸边界。
对于预载图片对象_preload,要获取图片的原始尺寸,所以要用image方式。 而预览图片对象img,则要根据设定尺寸显示图片,所以要用scale方式。
而src属性的路径还支持本地路径,是实现filter模式的关键所在。 幸运的是滤镜并没有像file控件那样提高安全性,否则就没办法实现图片本地预览了。
【nsIDOMFile接口】
ff从3.0(或更早)开始,就不能通过value获取file的完整路径,也不支持直接用本地路径显示图片。 不过欣喜的是,它同时也提供了nsIDOMFile接口,能更好地获取文件数据。 在ff的file控件有一个FileList对象,包含了带nsIDOMFile接口的File对象。 ps:FileList对象貌似是一个NodeList对象,但目前只能用第一个,可能是为了将来实现一个file控件选择多个文件的功能预留的。
这个File对象有三个获取文件数据的方法:
- getAsText:获取文件的文本数据,可以通过参数设置编码;
- getAsDataURL:获取文件的Data URI数据;
- getAsBinary:获取文件的二进制数据。
其中getAsDataURL获得的Data URI数据可以用于显示图片,_domfileData中就是用它来获取数据的。
File对象还有支持两个属性:fileName(文件名,不包括路径)和fileSize(文件大小)。 相关具体说明参考mozilla的File和nsIDOMFile。
出处:蓝色理想
责任编辑:bluehearts
上一页 JavaScript 图片预览效果 [6] 下一页 JavaScript 图片预览效果 [8]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|