Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Base64 image tag in safari did not showed up

I made a tsp which decode Image to base64 byte array String.

It works in Chrome and Firefox. However in safari 8.0, it does not work.

My jsp looks like below :

String sFileInfo = "";
String name = request.getHeader("file-name");
String ext = name.substring(name.lastIndexOf(".")+1);

InputStream is = request.getInputStream();
byte b[] = IOUtils.toByteArray(is);

String base64DataString = Base64.encodeBase64String(b);

base64DataString = "data:image/" + ext + ";base64," + base64DataString;

if(is != null) {
  is.close();
}

And as result code below will be attached to browser.

<p><span style="font-size:48px"><img alt="" src="data:image/jpeg;base64,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" style="height:90px; width:169px" />1<span style="background-color:#00FFFF">zxczxczc</span></span></p>

I copy this code(part of after base64;) and put link below in safari.

http://base64online.org/decode/

and I got an image, so I assume that Safari also support base64 image.

However, when I put this on web with image tags, it does not work.

Thanks for answer :D

PS browser error message is

Failed to load resource: (kCFErrorDomainCFNetwork error -10.)

like image 245
Juneyoung Oh Avatar asked Dec 06 '22 23:12

Juneyoung Oh


2 Answers

I know this question is pretty old but I've recently faced a similar problem on iOS' safari, and the problem seems to be that Safari will not render base64 images that does not have a number of character divisible by 4.

The solution to this problem is to pad your encoded string at the end using '=' characters. Here is a basic algorithm:

// b64str = 's/3eea4sp...' (or any base 64 encoded string)
while (b64str.length % 4 > 0) {
  b64str += '=';
}

Hope this helps someone !

like image 122
SylvainB Avatar answered Dec 28 '22 01:12

SylvainB


I was in a similar situation but the posted solution did not work for me. But I did come up with an alternative solution after some trial and error. Hope this helps out.

// Add an actual base64 string
var encodedImgString = 'data:image/png;base64,iVBORw0KGgoAAA...';

// Create an image, set img source and cross origin attribute
var iosImg = new Image;
iosImg.src = encodedImgString;
iosImg.crossOrigin = 'Anonymous';
    
// Change this to target your element and add it wherever you need it to appear
document.body.appendChild(iosImg);
like image 26
CodeEngie Avatar answered Dec 28 '22 01:12

CodeEngie