2013-05-02 65 views
5

我有一個在(Java)後端製作一些條形碼的二維條形碼生成器。它爲我提供了數據URL,並使用Javascript將它們設置在客戶端。所有在Chrome,Firefox中運行良好。但不是在IE8(當然!),雖然一半的圖像工作,一半不工作。IE8無法讀取的數據URL圖像

我的圖片幾百個字節(當時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小提琴在IE8中效果不佳,因此請使用this link直接查看結果。

如果你有關於這個問題的原因的想法,請分享:)

+0

必須是本機IE8錯誤,它在IE10和IE瀏覽器模式下工作。 – Christoph 2013-05-02 08:04:39

回答

3

出於某種原因失敗的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更寬鬆。

+0

thanx,我們將搜索更新的庫或嘗試在png中使用jpg。好工具btw。 – VDP 2013-05-02 09:54:49