【filter模式】

filter模式在_filterData程序中得到文件本地路径，但ie7/8都不允许直接使用本地路径显示图片。
不过还是可以通过滤镜，用本地路径来做预览图片效果。

filter模式使用_filterShow方法来显示预览图片。
里面先调用_filterPreload方法来设置滤镜预载图片对象。
跟一般预载图片对象不同，滤镜预载对象是用滤镜来显示图片，所以并不一定要图像元素。
程序就使用了div元素作为滤镜预载对象：

var preload = this._preload = document.createElement("div");

$$D.setStyle( preload, {
    width: "1px", height: "1px",
    visibility: "hidden", position: "absolute", left: "-9999px", top: "-9999px",
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
});

var body = document.body; body.insertBefore( preload, body.childNodes[0] );

在样式设置中隐藏元素并添加滤镜，要使滤镜生效width和height必须设置一个值。
由于要获取尺寸，只能用visibility来隐藏并插入body，关于AlphaImageLoader滤镜后面再介绍。

然后在_filterShow中预载图片：

try{
    preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
}catch(e){ this._error("filter error"); return; }

成功的话，再给img载入图片：

this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + data + "')";

最后调用_imgShow设置尺寸：

this._imgShow( ImagePreview.TRANSPARENT, preload.offsetWidth, preload.offsetHeight );

由于img是一个图片对象，默认会显示一个小图标，为了去掉这个小图标，可以让它显示一个透明图片。
程序传递了ImagePreview.TRANSPARENT来设置透明图片，具体数据在Data URI 和 MHTML再说明。
ps：当然也可以在filter模式用div做预览图片对象就没有小图标了，但这样兼容起来会麻烦很多。

出处：蓝色理想
责任编辑：bluehearts

上一页 JavaScript 图片预览效果 [5] 下一页 JavaScript 图片预览效果 [7]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。