23

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

How can I achieve this in ASP.NET?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Cute Bear
  • 3,223
  • 13
  • 44
  • 69
  • javacript and image data are two different thinks, meaning that you can display image with base64 data, but the javascript not needed - you only needed if you try to manipulate the page. What are you have up to now, and what actually try to gain here ? Do you have any javascript code to show us for what you try to do ? – Aristos Feb 27 '12 at 11:14
  • you can see: http://stackoverflow.com/questions/4564119/javascript-convert-byte-to-image – shmoltz Feb 27 '12 at 11:23

2 Answers2

61

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">

Similar Stack Overflow questions:

Community
  • 1
  • 1
Aristos
  • 66,005
  • 16
  • 114
  • 150
  • and what about explorer 7? – Eric Frick Mar 15 '13 at 17:38
  • @EricFrick, we only work with Chrome and IE8 so this piece of code is good enough! – Cute Bear Oct 25 '13 at 07:43
  • @Aristos, is that the most optimized way to do it ? isn't writing to the imageData faster? I am already sending base64 to the browsers and having issues with portable devices I guess with modest processors they have issues to decode and render many images (stream) – Mehdi Karamosly Nov 19 '13 at 06:18
  • @MehdiKaramosly How you writing to the imageData, do you have a link to some code to see it ? – Aristos Nov 19 '13 at 06:33
  • it is not really about img but canvas, however you can export an image from canvas : http://www.w3schools.com/tags/canvas_imagedata_data.asp http://stackoverflow.com/questions/16679158/javascript-imagedata-typed-array-read-whole-pixel – Mehdi Karamosly Nov 19 '13 at 06:53
  • 1
    @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) – Aristos Nov 19 '13 at 08:55
  • This may sound weird, but I just can't help it, I love you man! :) Thanks for this solution! – Serj Sagan May 01 '14 at 05:20
  • 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! – jpmottin Apr 23 '16 at 22:53
15

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"/>
oligofren
  • 20,744
  • 16
  • 93
  • 180