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 = '

Solution 1:

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 !

Solution 2:

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 stringvar encodedImgString = 'data:image/png;base64,iVBORw0KGgoAAA...';

// Create an image, set img source and cross origin attributevar iosImg = newImage;
iosImg.src = encodedImgString;
iosImg.crossOrigin = 'Anonymous';
    
// Change this to target your element and add it wherever you need it to appeardocument.body.appendChild(iosImg);

Solution 3:

@SylvainB - I think it needs to be divisible by 3 or 4 to render in Safari @IHan - make sure to exlude 'data:image/png;base64,' part while doing the divisibility test