Trouble displaying binary stored in Azure Blob Storage on webpage

Question

Using Windows Azure storage services, I have created a container and subsequently created a BlockBlob (a JPEG image) using the PUT Rest API. I can log into my Azure portal and download the image.

When I call the GET API Azure successfully returns me the blob in the response body -- and I think it's the same raw binary I uploaded.

When I call the GET API, I'm doing so via an XHR request in my JavaScript (Sencha Touch) application. I can see the response (the raw binary), but I cannot figure out how to read the binary into an image that I can display.

I've tried the following:

rawBinary = response.responseText;
encodedBinary = btoa(unescape(encodeURIComponent(rawBinary)));
img.setSrc('data:' + file.type + ';base64,' + encodedBinary);

...which gives me something like this:

data:image/jpeg;base64,77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+/ve+/vQBYRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAO+/vWkABAAAAAEAAAAmAAAAAAAD77+9AQADAAAAAQABAADvv70CAAQAAAABAAAKIO+/vQMABAAAAAEAAAfvv70AAAAA77.......

This correctly sets a background URL on a DIV as a base64 encoded image... but nothing displays. It looks like a valid base64 string, and there are no errors in my console or network tabs. But nothing shows.

Can anyone help?

EDIT: Below is what the "binary" response looks like in the XHR response body:

����JFIF��XExifMM*�i&��
����C   ��C��� "��  
���}!1AQa"q2���#B��R��$3br� 

...etc... VERY long response of unreadable characters

Yes, I can verify in Safari Web Inspector that the DIV has a height and width. — arthurakay

ramiramilu ramiramilu · Accepted Answer · 2014-01-04T17:24:32

Can you try this jsfiddle by Vlad - http://jsfiddle.net/79NnG/

function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

var img = new Image();
img.src = "data:image/jpeg;base64,"+hexToBase64(getBinary());
alert(hexToBase64(getBinary()));
document.body.appendChild(img);

Also this post should help you - How to display binary data as image - extjs 4

Trouble displaying binary stored in Azure Blob Storage on webpage

1 Answers