IE8에서 읽을 수없는 데이터 URL 이미지

Question

(Java) 백엔드에서 일부 바코드를 만드는 2D 바코드 생성기가 있습니다. 그것은 날 데이터 URL을 제공하고 자바 스크립트를 사용하여 클라이언트 측에서 설정했습니다. Chrome, Firefox에서 모두 정상적으로 작동합니다. 그러나 IE8에서는 (물론!) 이미지의 절반이 작동하고 절반이 작동하지 않습니다.

내 이미지 (훨씬 적은 32킬로바이트 다음) 몇 백 바이트 여기

가 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을 사용하면 결과를 직접 볼 수 있습니다. 이 문제의 원인에 대한 생각은 어떤 이유로 :

Answer 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==); 

크롬과 파이어 폭스는 CRC에 좀 더 관대하다고 가정합니다.