Base64 Encode image and render it on JS

Question

I am trying to base 64 encode an image using Java as below

public static String getImageStream(String latitude, String longitude) {
    byte[] result = null;
    try {
        URL url = new URL(....);

        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
        connection.setUseCaches(false);
        connection.setDoOutput(true);
        DataOutputStream wr = new DataOutputStream(connection.getOutputStream());
        wr.close();
        InputStream iSteamReader = connection.getInputStream();
        BufferedReader reader = new BufferedReader(new InputStreamReader(iSteamReader));
        String line;
        StringBuilder response = new StringBuilder();
        while ((line = reader.readLine()) != null) {
            response.append(line);
            response.append('\r');
        }
        reader.close();
        result = response.toString().getBytes("utf-8");
    } catch (IOException e) {
        logger.error(e.getMessage(), e);
        result = new byte[0];
    }
    return Base64.getEncoder().encodeToString(result);
}

This gives me an image of the form

77+9UE5HDRoNAAAADUlIRFIAAAHvv70AAAHvv70IAwAAAO+/vWHvv73vv70AAAHvv71QTFRFRUhNSExRSU1SS09UTFBVTVFWTlJXT1RZUFVaVlpgV1xiWF1jXGFnYWZtZGlwZmxza3F4bHJ5bnR7NO+/vVN977+977+9Qu+/ve+/vUTvv73vv71I77+977+9TO+/ve+/vU3vv73vv71O77+977+9UO+/ve+/vVTvv73vv71V77+977+9Vu+/ve+/vVzvv73vv71d77+977+9ZO+/ve+/vWbvv73vv71s77+977+9cO+/ve+/vXTvv73vv71077+977+9fe+/ve+/ve+/vUQ477+9RTrvv71LP++/vUM177+9Rjnvv71JOu+/vUpA77+9T0Lvv71PRu+/vVBD77+9U0fvv71WSe+/vVhO77+9eXjvv73vv70F77+977+9JO+/ve+/vSfvv73vv71R77+977+9Se+/ve+/vWXvv73vv71p77+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+977+9xLDvv73Gsu+/vciKyq3vv73OvO+/ve+/ve+/ve+/ve+/vc2477+9zrnvv73Qou+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/vd2l77+936fvv73hjo/ilZrvv73vv73vv73go6jet++/ve+/vdOD77+91Ibvv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv73vv70LMO+/vQAAAAFiS0dE77+9Lu+/vUovAAAI77+9SURBVHjvv73vv73YjXMUZx3vv73vv70lFAgl77+9VFlCBe+/vWBq77+9J++/ve+/vXAtaSlpIwgeWu+/ve+/vRTvv71EXlLvv71A77+977+9WO+/vQBSRO+/vWhKQSjvv73vv73vv73vv73vv70+e++/ve+/ve+/vSnvv71pYe+/vTvvv73vv70d77+977+977+9Pe+/ve+/ve+/vWd277+977+9S++/ve+/vSop77+9C9i9CQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYAkCSxBY77+977+9EgTvv70g77+9BO+/vSUILEFgCQJLEFjvv73vv70SBO+/vSDvv70E77+9JQgsQWAJAksQWO+/ve+/vRIE77+9IO+/vQTvv70lCCxBYO+/vQUyOH7vv73vv73vv71zQzvvv73vv71K77+977+977+9QO+/vc+H77+9au+/vX7vv73vv73vv73vv70/M1Tvv73vv71+dO+/vQXvv71TC+e3r3lqde+/vTvvv71w77+977+977+977+9F++/vSHvv70A6a+F77+977+977+9dO+/ve+/vTTvv73vv70k77+977+977+977+977+977+977+977+977+9Su+/ve+/vVcDZCLvv73vv73vv73vv71O77+977+977+9NU/vv73CgWrvv71vYO+/ve+/ve+/vWtw77+977+977+9zoHvv73vv71A4pu+77+977+9P9qXNgPvv70n77+9al/vv73vv70QJu+/ve+/vWPvv71cfmE677+9X++/vXvvv71y3Lh877+977+9Ou+/vWHvv73vv73vv71qde+/ve+/ve+/ve+/ve+/vX5JHnwzICfvv73vv710S++/vRrvv73vv73vv73vv73vv73vv73vv71P77+92r7vv73vv71/fO+/ve+/vWgzFO+/ve+/ve+/vSfvv705SAhTY3/vv70OE96RPe+/vWZAJsKadHfvv70XZu+/vR5eXyo9NxLvv70udO+/ve+/ve+/vQvvv73vv73vv70e15jvv70n77+977+9Qe+/vQ/vv70r77+9Os+EE0V/77+977+977+9HnwzIO+/vWFlOhF277+977+93bzvv71h77+977+977+977+977+977+9S++/ve+/ve+/vUvvv70jXeWXr++/ve+/ve+/vcqtW++/ve+/ve+/vXXvv73vv73vv70L77+9Du+/ve+/vcWp77+9X++/vUgeUe+/vSthVXoyDO+/ve+/vSrvv70+NdW577+9TAhnfu+/vX7vv70P77+9V++/vWnvv71K77+977+9J++/ve+/ve+/ve+/ve+/vQzvv73vv73vv73vv73vv73vv73vv71177+9Du+/ve+/vUfyiIKcC8+k77+9Q30lD39N147vv70277+977+977+9YUPvv71d77+9ce+/ve+/ve+/vca977+977+9YSLvv71Ide+/ve+/ve+/vTYM77+9WO+/vRzvv70N77+9Re+/ve+/vWjvv73WnjjEnu+/vS8c77+977+977+977+9V2lK77+977+9He+/vWjvv73vv73vv73vv73vv73vv70lTe+/ve+/vVl277+9OR7vv73vv73vv73vv73vv70577+977+977+9O13vv73vv73vv73vv71jW++/ve+/vQ4yEUHvv71y77+9ExHvv71rd++/vRHvv709Ge+/ve+/vQAp77+9aO+/ve+/vXRc77+977+9FT3vv73vv71B77+977+977+977+9zZbvv73vv70F77+9PFbvv71fdu+/ve+/ve+/vTQqJj03X0/vv71K77+977+9d3ffqu+/vcyB7JyM77+977+977+977+977+977+977+977+977+9K++/vU8977+9bH7vv71a77+9OX3vv73vv71K77+977+9au+/ve+/ve+/ve+/vRXvv70MYW/vv73vv718aTTvv73vv73vv73vv73vv73vv70UDu+/vV3vv70q77+977+977+9aNuC77+9PVnvv73vv73vv73vv73vv73vv73vv71P77+9Le+/vUVjZ++/ve+/vR7vv70177+9NO+/ve+/vVxp77+977+977+9FmXvv71vZu+/ve+/vWTvv73vv70c77+977+977+93Zfvv71477+9XO+/vUjvv713bHlmVe+/vR7vv71HDu+/ve+/vT906Kel77+9cO+/ve+/ve+/ve+/vSMb77+9L13vv70X77+9bVtnF++/ve+/ve+/ve+/vV8o77+9Fybvv70eSe+/vSB/3pRt77+9Te+/ve+/ve+/ve+/vWPvv71Z77+977+9Rnfvv73vv71I77+9b3bvv73vv73vv70aG++/ve+/vSVe77+9Zk7vv73vv71NWXTvv73vv73vv714O++/vXtR77+977+9ZyDvv73vv714bu+/vUrTiDIe77+9R++/vQ9377+977+92pF4Ue+/vXvvv73vv73vv70f77+977+92Zbvv73vv70u77+9AQnvv73vv73vv73vv73vv73vv71g77+9Iynvv71877+9Se+/vXonyabvv73vv70lcXsq77+977+9IB/vv73vv70b2bXvv73vv71ZY2MG77+977+977+9fNe177+9Ru+/ve+/vXZ2Z14DZO+/vRvvv71677+977+9Au+/vX8177+977+93Ls7Pu+/vU/vv73vv73vv70f77+977+9Iu+/vVB8MO+/vTB677+977+977+9TO+/vWfvv73vv73vv71077+977+977+977+977+9VHxwLHoiBe+/ve+/ve+/ve+/ve+/vU3vv711aU/vv71f77+977+9Z++/vRfvv71feD3vv73vv73bmTU2Gu+/ve+/vcW977+977+90bIP77+9cy3vv71677+9ARIvX++/ve+/ve+/vQ1S77+9H++/ve+/vSc9Me+/vVfvv70O77+9P++/ve+/vQ8H77+9fQfvv71xddmyMu+/ve+/ve+/ve+/ve+/ve+/vTE+e++/vRtePu+/ve+/vc2V77+977+977+92KVlce+/ve+/vQfvv73vv73vv71n77+977+977+9Le+/vTvvv71NNTbvv71677+9Yu+/vXjvv73vv70nLu+/vXfvv716bu+/ve+/vTRAXu+/vd2777+9Hu+/vWrvv70777+977+977+9IW/vv71tDgwO77+977+9xb9N77+9f9iRPnkq77+977+977+9OTjvv71277+977+9KO+/ve+/vSzvv719K++/ve+/vTQv77+977+9TX7vv71w77+9R++/vUXvv73vv73vv73Rue+/ve+/vTU277+9bnsr2ZIkX++/vXsf77+977+9ZO+/vQFyfe+/ve+/ve+/ve+/vQfvv71/A++/vVDvv71+77+977+9YH84X++/vRBI77+977+9Tu+/vWs/GO+/ve+/ve+/ve+/ve+/vT8E77+9K++/ve+/vR4C77+9AkHvv73vv73vv70lZu+/vV/vv73vv73vv73vv73vv73vv73vv73vv73vv70X77+9EEDvv70L77+9wrPvv73vv71s77+977+9AAAAAElFTkTvv71CYO+/vQ0=

Now When I try to render that image using javascript, nothing gets rendered. My JS code looks like below

  var image = new Image();
  // b64Data contains the string I have showed above from Java API
  image.setAttribute('src', 'data:image/png;base64,' + b64Data);
  document.getElementById('imageDiv').appendChild(image);

Answer 1

The first few bytes of your base64 data, after decoding, is:

"\xef\xbf\xbdPNG\r\x1a\r\x00\x00\x00\rIHDR\x00\x00\x01\xef\xbf\xbd…"

Note that the actual file header of a PNG should be:

"\x89PNG\r\n\x1a\n…"

We note that the "\x89" becomes "\xef\xbf\xbd" which is "�" in UTF-8, and all new-lines become "\r". So clearly the PNG is wrongly encoded, and that is due to treating the PNG as a text.

---

The error is here:

    BufferedReader reader = new BufferedReader(new InputStreamReader(iSteamReader));
    String line;
    StringBuilder response = new StringBuilder();
    while ((line = reader.readLine()) != null) {
        response.append(line);
        response.append('\r');
    }

Do not use Reader on binary file. Do not use String to manage binary data. Both of these are designed to work with text.

You should use the InputStream directly to read from the binary file, and use ByteBuffer or byte[] to store the output. For this task, we just read the whole file into a byte[], and then use Base64.getEncoder().encodeToString() on the result since we've got a correct byte[] already.

    try (InputStream iSteamReader = connection.getInputStream()) {
        byte[] byte = IOUtils.toByteArray(iSteamReader);
        return Base64.getEncoder().encodeToString(byte);
    }