Obrazy adresów URL danych nieczytelne dla IE8

Question

Posiadam generator kodów kreskowych 2D, który wykonuje niektóre kody kreskowe w backendach (Java). Daje mi adresy URL danych i ustawiam je po stronie klienta przy użyciu Javascript. Wszystko działa dobrze w przeglądarce Chrome, Firefox. Ale nie w IE8 (oczywiście!) Chociaż połowa obrazów działa, a połowa nie działa.

Moje obrazy są kilkaset bajtów (tyle mniej niż 32KB)

Oto przykład nie pracuje w IE8:

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

Oto przykład pracy w IE8:

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

Oto fiddle. Skrzypce JS nie działają tak dobrze w IE8, więc użyj this link, aby zobaczyć wynik bezpośrednio.

Jeśli masz pomysł na temat przyczyny tego problemu proszę podzielić :)

Answer 1

Z jakiegoś powodu uszkodzonej base64 dekodowane .png jest nieprawidłowy. Jeśli pobierzesz obraz i ponownie go zapiszesz, rozmiar pliku jest inny.

Widzę 237 bajtów dla oryginalnych wersetów 409 dla ponownie zapisanej kopii.

Można to potwierdzić za pomocą narzędzia 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%). 

Korzystanie następujące ważne re-saved.png base64 zakodowane dane rozwiązuje problem w IE8.

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

Zakładam, że Chrome i Firefox są łagodniejsze w stosunku do CRC.