Search code examples
javabase64htmlunitdata-uri

HtmlUnit use WebClient to download an image as base64 encoded DATA Uri


I want to use an existing instance of WebClient to download an image. The reason for this is because I want the cookies to be passed with the request.

How can I download an image using an existing instance of WebClient?

Also, how can I base64 encode the image to be able to view it using data:image/jpeg;base64,...

Current code:

WebClient client = new WebClient(BrowserVersion.FIREFOX_3_6);
UnexpectedPage imagePage = client.getPage("http://...");
String imageString = imagePage.getWebResponse().getContentAsString();
BASE64Encoder encoder = new BASE64Encoder();
String base64data = encoder.encode(imageString.getBytes());

So now I have base64 data of the image, but I still can't view the image using data:image/jpeg;base64,....


Solution

  • A couple of things to consider:

    • The BASE64Encoder() generates a string that has a line break every 77 chars. Take that out using .replaceAll("\r?\n","").
    • For that method also, it is better to retrieve the web page InputStream rather than the string. Also, to convert that to a byte array, I used a utility method (source and other options can be found here).

    Working source code:

    public static void main (String args[]) throws IOException {
        WebClient client = new WebClient(BrowserVersion.FIREFOX_3_6);
        UnexpectedPage imagePage = client.getPage("https://i.sstatic.net/9DdHc.jpg");
        BASE64Encoder encoder = new BASE64Encoder();
        String base64data = encoder.encode(inputStreamToByteArray(imagePage.getWebResponse().getContentAsStream()));
        System.out.println("<img src=\"data:image/png;base64,"+base64data.replaceAll("\r?\n","")+"\" />");
    }
    
    private static byte[] inputStreamToByteArray(InputStream is) throws IOException {
        ByteArrayOutputStream buffer = new ByteArrayOutputStream();
        int nRead;
        byte[] data = new byte[16384];
        while ((nRead = is.read(data, 0, data.length)) != -1) {
            buffer.write(data, 0, nRead);
        }
        buffer.flush();
        return buffer.toByteArray();
    }
    

    Source image:

    yao face

    Output base64 image here.