如何在HTML文件中编码图像数据？

Question

我希望能够输出包含图像的HTML文件(在文件本身内).通过谷歌搜索,我遇到了几种方法:

• javascript:imageData
• 一个数据URI,如 <IMG SRC="data:image/gif;base64,[...]">
• <object ... > tag(虽然这使用了数据URI,因此可能会继承相同的限制)

但我不知道浏览器支持哪个更好,或者有其他替代方案.

任何有实际经验的人能为我提供建议吗？谢谢.

Answer 1

关于浏览器支持,来自维基百科:

以下Web浏览器当前支持数据URI:

• Gecko及其衍生产品,如Mozilla Firefox
• 歌剧
• KDE,通过KIO输入/输出系统.这允许KDE浏览器Konqueror支持数据URI.
• 苹果浏览器; 尽管Safari的渲染引擎WebKit是Konqueror的KHTML引擎的衍生产品,但Mac OS X并不共享KIO从属架构,因此不会共享实现.
• 适用于iPhone的Safari;
• 谷歌浏览器
• Internet Explorer 8; 出于安全原因,Microsoft对某些"不可导航"内容(例如标签和CSS规则)的支持有限,包括担心嵌入在数据URI中的JavaScript可能无法被脚本过滤器解释,例如基于Web的电子邮件使用的脚本过滤器客户端.数据URI必须小于32k.
• 世界浏览器; 是一个IE shell浏览器,它内置了对数据URI方案的支持

IE无法<object>正确处理标记,请参阅此处了解更多详细信息.简而言之,您无法信任IE从中显示图像.

在javascript:imageData还没有得到很好的支持,因为它在很多跨站脚本攻击.

有许多讨论这个在上网络,他们都得出的结论有嵌入图像没有很好的通用的方法.如果您只需要支持浏览器的子集,数据uri可以工作,或者数据uri和javascript的组合.