Displaying a byte array as an image using JavaScript

71,172

Solution 1

If you have the byte array, you first convert it to Base64String and then you place it on an img tag like that (for a PNG image):

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

Solution 2

EDIT: I just realized the question is a bit ambigious, so the answer below might not fit. If the byte array is something you have in the .NET CLR side of things, then base64 is probably the way to go, but if it's something you create or deal with in the client, my answer below is the way to go.

Converting the byte array to base64 when you have the binary byte array is ridiculously expensive, and more importantly; you don't have to do convert it at all in modern browsers! The static URL.createObjectURL method creates a DOMString, a short browser-specific url, you can use in img.src or similar.

This is infinitely faster than solutions that require chaining TextEncoder and btoa when all you need is to display an image received in a byte array form.

var blob = new Blob( [ uint8ArrayBuffer ], { type: "image/jpeg" } );
var imageUrl = URL.createObjectURL( blob );

This is using HTML5 APIs, and so will not work on Node or other JS based servers, of course.

// Simulate a call to Dropbox or other service that can
// return an image as an ArrayBuffer.
var xhr = new XMLHttpRequest();

// Use PlaceKitten as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "https://placekitten.com/200/140", true );

// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    // Obtain a blob: URL for the image data.
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    var img = document.querySelector( "#photo" );
    img.src = imageUrl;
};

xhr.send();

<h1>Demo of displaying an ArrayBuffer</h1>
<p><a href="http://jsfiddle.net/Jan_Miksovsky/yy7Zs/">Originally made by Jan Miksovsky</p>
<img id="photo"/>

71,172

Cute Bear

Have you ever noticed that anybody driving slower than you is an idiot, and anyone going faster than you is a maniac?

Updated on September 24, 2020

Comments

Cute Bear over 3 years

I am trying to display an image (byte array) using purely JavaScript.

How can I achieve this in ASP.NET?
Aristos over 10 years

@MehdiKaramosly The canvas and how you draw on it, is different from what I have write here. There is no direct compare of this two methods for say what is best, what is faster etc. This method here is used for inline image display on some rare cases, or I use it when I have canvas and I like to save the result of canvas to an image and mail it. When I have one canvas, I convert it to image like that one, and then I can mail it (all done from browser, post back to server, server send the email)
Serj Sagan about 10 years

This may sound weird, but I just can't help it, I love you man! :) Thanks for this solution!
jpmottin about 8 years

Thanks @Aristos for "Base64String" in C#. You made my day, in Java, before your comment, i sent an array of bytes (in base64) and it was NOT worked ! But now i send a String of Base64 and it works very well! So thanks!