How to display an image stored as byte array in HTML/JavaScript?

Question

I'm writing a web page in HTML/JavaScript. I'm downloading an image from my backend using AJAX. The image is represented as raw byte array, not an URL, so I can't use the standard <img src="{url}"> approach.

How do I display the mentioned image to the user?

Taenia

possible duplicate of Displaying byte array as image using JavaScript – Philine

OutputStream o = resp.getOutputStream(); o.write(imageInBytes); – Taenia

I'm afraid to ask, but curiosity wins... Why is this off-topic? – Dogie

I don't think this issue is off-topic. – Fleenor

Answer 1

Try putting this HTML snippet into your served document:

<img id="ItemPreview" src="">

Then, on JavaScript side, you can dynamically modify image's src attribute with so-called Data URL.

document.getElementById("ItemPreview").src = "data:image/png;base64," + yourByteArrayAsBase64;

Alternatively, using jQuery:

$('#ItemPreview').attr('src', `data:image/png;base64,${yourByteArrayAsBase64}`);

This assumes that your image is stored in PNG format, which is quite popular. If you use some other image format (e.g. JPEG), modify the MIME type ("image/..." part) in the URL accordingly.

Similar Questions:

• Displaying a byte array as an image using JavaScript

• Display bytes as images on an .aspx page

• 'data:image/jpg;base64' and jQuery image preview in Internet Explorer

• Convert from binary data to an image control in ASP.NET

• How to convert a byte array into an image?

Campus

My Byte = dwr/download/k1a3JvBCfU3vLji$zKkhQObxzck. src = data:image/png;base64,dwr/download/k1a3JvBCfU3vLji$zKkhQObxzck. I used DWR – Taenia

Byte Format image Download. – Colombia

<b32ded4a 01000000 708de749 01000000 fa6a1102 01000000 e0e7e549 01000000 f0675d6f 01000000 c051db01 01000000 b23d1b8e 3a050000 00000000 30ea44c4 01000000 00000000 00000000 306b5d6f 01000000 0000> Hi i getting data like this format can you help how to convert it into image data:video/webm;base64 format. It is actually a live video streaming. – Adviser

Late to the party but if your response looks like [137,80,78,71,13,10,26,10,0,...], you can use this line: document.getElementById("ItemPreview").src = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array([137,80,78,71,13,10,26,10,0,...]))); – Mesocratic

I edited the answer a bit to make it more clear, but I'm not getting one thing so I didn't really fix it. Why does this answer assume that the image is stored in a base64 string? The OP mentioned (and I checked the edit history) a "byte array", not "base64 string". – Dogie

@ cubuspl42 It doesn't assume that image is stored in a base64 string. It is encoding the byte array into base64 encoded string so that <img> can view it – Savill

Joel, conversion from byte array to a string, the procedure String.fromCharCode.apply results in RangeError: Maximum call stack size exceeded, so in my case, that's not an option. – Uninterrupted

In @Joel'-' solution, "btoa is deprecated" warning is given. If someone encounters the same issue, try using Buffer.from(array).toString('base64') instead. – Encephalomyelitis

In browsers there's no Node.js frunctions to use. It's possible to get "Maximum call stack size exceeded" error since .apply (and also spread syntax) has a limit which varies across JavaScript engines. A good way to solve it is to slice the array and call .apply multiple times. See Function.prototype.apply() on MDN for details. – Revenuer