Converting thea byte array to base64 when you have the binarybinary byte array (not a JSON string array of the byte values) is ridiculously expensive, and more importantly; it'sit is totally unnecessary work, as you don'tdo not have to do convert it at all in modern browsers! The static URL.createObjectURL method creates a DOMString, a short browser-specific url, from the byte array, and you can use the resulting short string 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"/>