如何绕过 IE8 32k 数据限制：base64 编码上的 uri？
Posted
技术标签:
【中文标题】如何绕过 IE8 32k 数据限制：base64 编码上的 uri？【英文标题】：How to get around IE8 32k limit on data:uri on base64 encode? 【发布时间】：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><%= ('<img src="data:image/jpg;base64,%s">' % Base64.encode64(@chart.to_blob)).html_safe %></b>
在 Rails 视图中：（支持所有浏览器）
<b><%= image_tag @chart+".png" %></b>
【讨论】：
以上是关于如何绕过 IE8 32k 数据限制：base64 编码上的 uri？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 iOS 字符串中禁用或绕过 Base64 图像 url 数据的转义序列
如何仅使用 JavaScript 将 base64 编码的图像数据上传到 S3？