如何绕过 IE8 32k 数据限制：base64 编码上的 uri？答案

【问题标题】：How to get around IE8 32k limit on data:uri on base64 encode?如何绕过 IE8 32k 数据限制：base64 编码上的 uri？
【发布时间】：2011-04-04 22:40:28
【问题描述】：

我需要向包含 1920x1080 png 的浏览器发送一个 html 响应。这是一个 html 查询截取的屏幕截图。

我在 base64 中对图像进行编码并将其作为 text/html 内容类型嵌入发送。像这样简单的东西：

<HTML><HEAD>Whatever</HEAD><BODY><img src="data:image/png;base64,data"/></BODY></HTML>

在 FF 和 Chrome 上运行良好，问题是我需要支持 IE8。 IE8对数据长度的限制：uri。

如果我压缩图像以使 png 编码低于 32k（约 600x500），我会丢失太多信息。

解决这个问题最简单的方法是什么？（我无权访问服务器来托管图像等）

【问题讨论】：

您想通过src="data:发送1920x1080图像的任何具体原因？
我的其他选择是什么？
你不需要支持IE7和IE6？幸运儿。
This link 似乎有一个相关的解决方案，但是，您要么需要访问服务器，要么需要具有可以伪造服务器响应的路由的客户端 javascript 模块。不过自己没试过。

【解决方案1】：

您始终可以将图像分成 4 个（或更多）并分别对每个部分进行编码。

【讨论】：

您能否提供一个示例链接，如何做到这一点？
是的@cobbal，你能发布一个例子来说明如何做到这一点吗？
我假设 cobbal 的意思是您可以将 4 张图像彼此相邻显示，就像马赛克一样，将显示为一张大图像。这可以通过使用任何图像编辑器将源图像分成 4 个来完成，分别对每个部分进行编码，然后使用 CSS 将它们分别放置在 HTML 中以正确定位它们。
您可以将 base64 编码的字符串拆分成更小的块。并在另一端将这些块重新组合成一个字符串并显示一个图像。无需渲染多个图像并对齐它们。
@gfullam 不，因为生成的 base64 编码字符串必须是原始图像的磁盘大小。

【解决方案2】：

你不能把图片存储在某个地方，返回它的路径，然后把 src 改成你刚刚生成的路径吗？

【讨论】：

【解决方案3】：

最后我们放弃了对 IE8 的支持。

我很幸运，它仅用于内部调试目的。

问题仍然存在。希望 IE9 不会有 data:uri 限制。

【讨论】：

【解决方案4】：

Base64 编码的数据 URI 在版本大于或等于 9 的 IE 中运行良好。因为 IE 9 没有数据 URI 限制。我也尝试修复此 IE 8 问题。但我无法解决这个问题。对于解决方法，将图像存储在应用程序内部的某个位置，并在显示时从应用程序中检索它。

在 Rails 视图中：（如果 IE >=9 则支持）

<b><%= ('&lt;img src="data:image/jpg;base64,%s">' % Base64.encode64(@chart.to_blob)).html_safe %></b>

在 Rails 视图中：（支持所有浏览器）

<b><%= image_tag @chart+".png" %></b>

【讨论】：