How to use UTF-8 image data (png/jpeg/gif) from ajax call to render image to user?

Question

I am using Bing Maps where you can use a POST call to get image data (png/jpeg/gif).

https://learn.microsoft.com/en-us/bingmaps/rest-services/imagery/get-a-static-map

Neither can I render the image to the user nor is it possible to download the file and display it when opened locally (the download works but the image file won't show an image).

This is the code that handles the image data from the POST request to the bing maps api:

// rsp contains UTF-8 image data (png)

let reader = new FileReader();
let file = new File([rsp], 'test.png');

// trying to render to user
reader.onloadend = function () {
    document.getElementById('img').src = 'data:image/png;base64,' + reader.result.substr(37); // substr(37) will get base 64 string in a quick and dirty way
};

reader.readAsDataURL(file);

// trying to make the image downloadable (just for testing purposes)

var a = document.createElement("a"),
    url = URL.createObjectURL(file);
a.href = url;
a.text = "Test";
a.download = 'test.png';
document.body.appendChild(a);

show in console what we getting in `src` ? i think we have some syntax errors — Vadim Hulevich, Mar 26 '20 at 09:33
to make your tag a download link , assign `download` attribute to it . also , have you tried to use `document.createElement("img")` and assigning src to it and then appending it ? it should work — Iman Emadi, Mar 26 '20 at 09:34
@VadimHulevich console: data:image/png;base64,77+9UE5HDQoaCgA... — Julius S., Mar 26 '20 at 09:36
@BrightFaith The download itself works, but the downloaded image file will not show an image. — Julius S., Mar 26 '20 at 09:38
i think because the encoding of images are not UTF-8 , for videos it's base64 , i am not sure about images , make sure if you are using correct encoding — Iman Emadi, Mar 26 '20 at 09:40
I recommend you check answer here https://codebeautify.org/base64-to-image-converter must show you some image — Vadim Hulevich, Mar 26 '20 at 09:41
The api is definitely returning valid image data, as I get a preview in the browser developer console. — Julius S., Mar 26 '20 at 09:47
@JuliusS. ok, try to put valid image source like a constant string, just for example; image which https://codebeautify.org/base64-to-image-converter can render — Vadim Hulevich, Mar 26 '20 at 10:48

Julius S. · Accepted Answer · 2020-03-26T10:41:45.967

The solution was to use a native XMLHttpRequest with responseType 'blob' or 'arraybuffer' to handle the binary server response (https://stackoverflow.com/a/33903375/6751513).

    var request = new XMLHttpRequest();
    request.open("POST", bingMapsPOSTEndpoint + '&' + queryParamsString, true);
    request.responseType = "blob";

    request.onload = function (e) {

        var dataURL = URL.createObjectURL(request.response);
        document.getElementById('img').src = dataURL;

    };

    request.send();

How to use UTF-8 image data (png/jpeg/gif) from ajax call to render image to user?

1 Answers1