javascript - IE8 无法读取数据 URL 图片

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

我有一个二维条码生成器,可以在 (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直接查看结果。

如果您知道此问题的原因,请分享 :)

最佳答案

由于某些原因,失败的 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 更为宽松.

关于javascript - IE8 无法读取数据 URL 图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16333073/

相关文章:

javascript - AJAX 在手动页面刷新之前未呈现更新

html - 如何将 RGBA 转换为旧版 IE 浏览器的滤镜

javascript - 将作为unit8array接收到的数据流作为pdf保存到前端的文件系统中

javascript - Blob 的 DataUri 与 Base64 字符串 DataUri

javascript - 从数据 URI 解码二维码

javascript - 基本 : Return and stop code execution on JavaScript

javascript - 当我按下按钮时,如何运行这个解析远程 json 的函数?

javascript - 什么是 "void 0"?

javascript - 输入类型 radio 选择器 :checked

jquery - 边框半径不适用于 IE,我使用什么库或 css hack