【问题标题】:Data URL images unreadable for IE8IE8 无法读取数据 URL 图像
【发布时间】:2013-05-02 08:00:34
【问题描述】:

我有一个二维条码生成器,在 (Java) 后端制作一些条码。它给了我数据 URL,我使用 Javascript 在客户端设置它们。在 Chrome、Firefox 中一切正常。但不是在 IE8 中(当然!)虽然一半的图像工作,一半不工作。

我的图片有几百个字节(远小于 32kb)

这是一个在 IE8 中工作的示例:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAAAAADFHGIkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEnRFWHRTb2Z0d2FyZQBCYXJjb2RlNEryjnYuAAAAgklEQVR42nVRixKAMAjy/3+a2hBwdVtdD1RELFxOXS6+9v1+F/+ICFs5jpGqsQWSosy3MQbVGSEDC7q4FaQrRiJDepJ1iG2sATggaqkeCc3VqicDDu6omgk1VdmS4W3Uq4sr4hE8llSYKe7GXsTxTPdZTdlyLQA4xrKQOit+Ryv7nwfFATbY5mERHQAAAABJRU5ErkJg

这是一个在 IE8 中工作的示例:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAABTCAAAAADG2WTcAAAACXBIWXMAACZzAAAmcwHzbHUKAAAAEnRFWHRTb2Z0d2FyZQBCYXJjb2RlNEryjnYuAAABAklEQVR42u2ZwQ7AIAhD+f+f3nbwMGwBl3hYg1xM5ngmUBE3u/abCTHtMTZcS4N3O0z3dNiYg+eeickZ02LMVzRcPJ0DD77zPsw5CQv6BGaYIwkmxo6+/V7S2CKHGShvYaNDmngN+T0TfGk9Y/E0DL4YkxVsWCQsSGGOOjPhHaNVfM5W2YMpMCFu2A3QQyHb722ZkQAT+dLzVJEJvqz4hYqc1H2Y4XHgU0WPCmzFxJhMjrTO00K3uDd7MXm8SSdKc1fej/7LLGTK+8yvPW0jZrGZ15sQXWbUGCTXOXIoiDGLLx3RUN1lOjOzCp5MkzZUmlkIM9JnGs9ezF2mxuz8r2e33b2PHKlEJ4PKAAAAAElFTkSuQmCC

这是fiddle。 JS fiddle 在 IE8 中效果不是很好,所以直接使用this link 来查看结果。

如果你知道这个问题的原因,请分享:)

【问题讨论】:

  • 必须是原生 IE8 错误,它在 IE10 和浏览器模式 IE8 中为我工作。

标签: javascript internet-explorer-8 data-uri data-url


【解决方案1】:

由于某种原因,失败的 base64 解码 .png 无效。如果您下载图像并重新保存,文件大小会有所不同。

我看到原始诗句有 237 个字节,409 节是重新保存的副本。

这可以通过pngcheck 工具来确认。

Z:\pngcheck-2.3.0>pngcheck.exe original.png
original.png  EOF while reading CRC value
ERROR: original.png

Z:\pngcheck-2.3.0>pngcheck.exe re-saved.png
OK: re-saved.png (24x24, 32-bit RGB+alpha, non-interlaced, 82.2%).

使用以下有效的re-saved.png base64 编码数据可修复 IE8 中的问题。

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABJ0RVh0U29mdHdhcmUAQmFyY29kZTRK8o52LgAAAPlJREFUSEu1VdESwyAM6v7/o7vpqYcEova6vnRmNSRA9HP/nuufTwMorwL06rvm5MQI0n9X1FZAialCOD6+wY09kYqdgE15dpJx9QjGHYfukCJFBbbOHeLa/Wc1QDDFv6OW4xPAqZCuCKkBU6XcEqprjurfSoe5TRlFmVVDoRkAWzOztLP40IDtpShjlznX2TlALhFATbeb5kcuYhGzM4vnJsxBRoPiWek0dc9UZMcAT26oFmw7ClVcq7F3+rCdrQacwFGVHRvsvLpebXD+lsngwrL3wVI0uHB2DBE6UMezGkI11dtn0Yo2dcko90kN1FA9jQ0A9veb6y86oobBWhxQUgAAAABJRU5ErkJggg==);

我认为 Chrome 和 Firefox 对 CRC 更宽容。

【讨论】:

  • thanx,我们将搜索更新的库或尝试 jpg 代替 png。顺便说一句,好工具。
猜你喜欢
  • 2021-05-15
  • 1970-01-01
  • 2013-10-04
  • 1970-01-01
  • 1970-01-01
  • 2010-12-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多