【Data URI 和 MHTML】

上面已经多次提到Data URI，详细介绍请看秦歌的“Data URI 和 MHTML”。
Data URI的主要作用是以字符代替数据，从而把文件“嵌”在代码里。
除了ie，其他浏览器基本都很好的支持了Data URI。
ie8也有限度地支持，详细参考msdn的data Protocol。

由于opera，safari和chrome需要remote模式的浏览器都支持Data URI，所以程序返回的是Data URI形式的数据。
相比返回路径的方法，返回Data URI不需要创建文件，还少一次HTTP请求。
ps：ie8只支持32k的Data URI数据，在ie8使用时要注意数据大小。

在filter模式需要一个透明图片来去掉img默认显示的小图标，一般的方法需要一个图片文件。
为了“省下”这个文件，可以使用Data URI来做一个1*1的透明图片：

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAA
LAAAAAABAAEAAAICRAEAOw==

支持Data URI的情况下，只要把img的src设置为这个值就可以显示一个透明图片了。

虽然ie6/7不支持Data URI，还可以用mhtml来代替。
在ImagePreviewd.js开头有一段注释了的代码：

Content-Type: multipart/related; boundary="_CLOUDGAMER"

--_CLOUDGAMER
Content-Location:blankImage
Content-Transfer-Encoding:base64

R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALA
AAAAABAAEAAAICVAEAOw==

这是mhtml记录数据的形式，调用时要按以下格式设置img的src：
mhtml:文件完整路径!blankImage

其中blankImage表示要获取的数据在文件对应的Content-Location。
问题在于如何获得script（js文件）的完整路径（包含http开头的路径）。
首先要在脚本运行时获取，当前运行的script肯定是document.scripts的最后一个：
document.scripts[document.scripts.length - 1]
ps：document.scripts详细参考msdn的scripts Collection，ff不支持，可以用getElementsByTagName("script")兼容。
接着可以利用getAttribute从src获取script的完整路径：

document.scripts[document.scripts.length - 1].getAttribute("src", 4)

ie6/7的getAttribute支持第二个参数，设为4表示返回完整路径的url地址，详细参考msdn的getAttribute Method。

结合Data URI 和 MHTML可以这样得到透明图片数据：

ImagePreview.TRANSPARENT = $$B.ie7 || $$B.ie6 ?
    "mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage" :
    "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAA
AAALAAAAAABAAEAAAICRAEAOw==";

使用时要注意：
脚本必须单独另存为一个文件，作为mhtml需要的文件路径。
要自动获取完整路径需要用script标签链接文件。

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

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

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