Generate base64 string of an image to use in data URI

Question

How to generate base64 string of an image to use in data URI?

I have an Base64 image encoding issue that I hope someone can help with. I'm trying to use data uri in my web page (ie <img src="data:image/png;base64,iVBORw..."/> with org.apache.commons.codec.binary.Base64 v1.8 generating the base64 string of png image.

To generate the base64 string I have used:

Base64.encodeBase64URLSafeString(imageFile)

The problem is the browser cannot render the image. I compared this generated string with one that works and I noticed the differences are the Apache Base64 version has "_" and "-" characters instead of "/" and "+". From the internet I see there are different Base64 formats so I assume Apache's implementation is not compatible with the browsers.

So I was wondering is there a library that implements the base64 format that would be appropriate for my purposes? My current fix is to just replace the characters but I would rather use a library.

Answer 1

According to the javadoc of the Base64.encodeBase64URLSafeString method, that seems to be by design. Check out the link I provided, it says this in the javadoc:

Encodes binary data using a URL-safe variation of the base64 algorithm but does not chunk the output. The url-safe variation emits - and _ instead of + and / characters. Note: no padding is added.

So you want to make sure you use the url-unsafe variation. That's the method called encodeBase64. Use this method instead:

Base64.encodeBase64(imageFile)

Answer 2

class ConvertToBase64 {

    public static void main(String[] args) throws Exception {
        byte[] b = "Ha".getBytes("UTF-8");
        System.out.println("bytes: " + b.length);
        javax.xml.bind.DatatypeConverter.printBase64Binary(b);  
    }
}