Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

How do I create a byte array image?

Create a ByteArrayInputStream object by passing the byte array (that is to be converted) to its constructor. Read the image using the read() method of the ImageIO class (by passing the ByteArrayInputStream objects to it as a parameter). Finally, Write the image to using the write() method of the ImageIo class.

What is byte array in JavaScript?

The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. It is an array of bytes, often referred to in other languages as a "byte array".

What is a byte in HTML?

The byte keyword is a data type that can store whole numbers from -128 to 127.


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?