CodeRatchet CodeRatchet - 6 months ago 8
Ajax Question

convert image response from external API to correct format to be displayed on page

I'm calling an external API which passes back an image data which I then take and render it on the page.

However when I call this API and console.log the response it looks like the following:

enter image description here

I'm not too familiar with images and their formats, so I've been googling trying to figure out how I convert this return type to the relevant format so I can display it on my page but with no avail.

My API call is as follows:

$.ajax({
type: 'GET',
beforeSend: function (xhr) {
xhr.setRequestHeader('t', ts);
},
url: "https://someservice.com/DataService.svc/ConsumerMedia(guid'" + imageQuid + "')/$value",
data: rBody,
cache: true,
contentType: "image/png",
dataType: "text",
success: function (data) {
console.log(data);

// Convert data to relevant format here
// Then display image as below

$('#photo').attr("src", "data:image/png;base64," + data + "");
},
error: function (request, error) {

}
});


If anyone can help shed some light in how or what I need to format the response in to so I can display it on the page it'll be appreciated.

Answer

Edit: I've tried and couldn't get it to work with jQuery ajax (either it doesn't support binary/arraybuffer response type or I couldn't find it), but the following code using XHR worked:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://someservice.com/DataService.svc/ConsumerMedia(guid'" + imageQuid + "')/$value", true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    if (this.status == 200) {
        var blob = new Blob([this.response], {type: "image/png"});
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function() {
            $('#photo').attr("src", reader.result);
        }
    }
};

xhr.send();

Of course you will have to tweak a little it to get the same result as the original ajax request.

Comments