Firefox 和 Chrome 不会解码 base64 图像或 pdf 文件答案

【问题标题】：Firefox and Chrome won't decode base64 image or pdf filesFirefox 和 Chrome 不会解码 base64 图像或 pdf 文件
【发布时间】：2012-04-13 17:47:07
【问题描述】：

我正在尝试使用 data uri 方案在浏览器上解码 base64 编码的图像。

这是我的 html 的样子：

<img src="data:image/png;base64,base64_string_here" 
  alt="base64 image name" width="600" height="400" border="1" />

Chrome 和 Firefox 无法解码这些图像并显示默认的“图像无法加载”图像。我已经验证我传递给浏览器的 base64 图像是正确的。事实上，Safari 显示相同的图像没有问题。

我尝试让浏览器解码类似的 base64 编码的 pdf，但这也不起作用。（同样，它不适用于 Chrome 和 Firefox，但适用于 Safari。）

<img src="data:application/pdf;base64,base64_string_here" 
  alt="base64 pdf name" width="600" height="400" border="1" />

Chrome 版本：18.0，FF 版本：11.0

有谁知道这里可能出了什么问题？（如果它有帮助的话——我试图显示的 base64 编码图像是 USPS 运输标签）。

【问题讨论】：

你能用base64数据发布一个完整的例子吗？
你验证过火狐可以打开原图吗？
这里是base64数据的链接：pastebin.com/KGvQUDYN
@Anonymous 没有“原始”图像 - 我得到的响应来自 USPS 的服务器。此响应是 base64 编码的字符串，需要在浏览器上显示为图像。我对base64没有深入的了解，但是当我使用在线解码器（opinionatedgeek.com/dotnet/tools/Base64Decode/）时，我只能在Safari中打开它返回的二进制文件（将其扩展名更改为.jpg) . Firefox 和 Chrome 无法打开此文件。这些信息有帮助吗？
发现了一些更有用的信息：我从 USPS 取回的图像是 TIF。 Google Chrome 和 Firefox 都不打开 TIF 文件。这就解释了为什么他们无法解码 base64 图像文件。但我也可以从 USPS 而不是 TIF 获得 pdf。谷歌浏览器应该能够打开 pdf，但据我所见，当它们采用 base64 编码时，它无法解码它们。但是，Chrome 在我先解码后能够打开 pdf。（来源：en.wikipedia.org/wiki/…）

标签： html image firefox google-chrome base64

【解决方案1】：

我知道这是一个非常古老的问题，但我最近遇到了同样的问题。（源于 USPS 标签返回）我通过将 Base64 字符串编码的 TIFF 转换为 Base64 字符串位图图像来修复它（尽管您可以使用任何您希望的图像类型）。

我使用 C# 来转换图像：

    Byte[] arrTiff = Convert.FromBase64String(FixBase64ForImage(oeVS.LabelImage));
    System.IO.MemoryStream msTiff = new System.IO.MemoryStream(arrTiff);
    Bitmap bmpTiff = new Bitmap((Bitmap)Image.FromStream(msTiff));
    System.IO.MemoryStream msBmp = new System.IO.MemoryStream();
    bmpTiff.Save(msBmp, System.Drawing.Imaging.ImageFormat.Bmp);
    Byte[] arrBmp = msBmp.ToArray();
    string sBMP64 = Convert.ToBase64String(arrBmp);

然后在 html/javascript 中，您可以使用它来显示标签，其中 sBMP64 是上面的结果。

<img src='data:image/bmp;base64,sBMP64'>

BMP 适合我的目的，但这里有一个浏览器支持的图像表：https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

【讨论】：

【解决方案2】：

这与最近 Chromium 团队决定阻止 Top-frame 导航到数据 URL 的决定有关（在 Google Chrome 最新版本 60 更新中）。

https://productforums.google.com/forum/#!topic/chrome/wvYYcBwJ9FA;context-place=topicsearchin/chrome/category$3AStable%7Csort:relevance%7Cspell:false

【讨论】：

这似乎不太可能，因为 OP 在 2012 年使用 Chrome 18 时遇到了这个问题。

【解决方案3】：

事实上，即使您提供正确的 MIME 类型，Chrome、Firefox 和 Opera 本身也不支持 .TIF 文件：它们需要插件来处理它们。

这里有一个有用的关于浏览器对图像文件的支持的总结：http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

【讨论】：

这似乎声称谷歌浏览器支持 img 标签中的 pdf。但是如果我尝试图像不会显示（尽管它在例如 Safari 中显示）。

【解决方案4】：

Chrome 和 Firefox 很可能会打开 TIF 图像——如果你告诉他们，它们就是 TIF 图像。目前在您的示例中，您正在告诉他们，它们是 PNG 图像，这应该是问题所在...尝试：

<img src="data:image/tiff;base64,base64_string_here" 
  alt="base64 image name" width="600" height="400" border="1" />

【讨论】：