Using JavaScript to display a Blob

javascript image base64 blob
GAgnew picture GAgnew · Oct 4, 2011 · Viewed 264.2k times · Source

I am retrieving a Blob image from a database, and I'd like to be able to view that image using JavaScript. The following code produces a broken image icon on the page:

var image = document.createElement('image');
    image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
    document.body.appendChild(image);

Here is a jsFiddle containing all the code required, including the blob. The completed code should properly display an image.

Answer

AdamZ picture AdamZ · Jan 2, 2015

You can also get BLOB object directly from XMLHttpRequest. Setting responseType to blob makes the trick. Here is my code:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/image.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();

And the response function looks like this:

function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   document.querySelector("#image").src = imageUrl;
}

We just have to make an empty image element in HTML:

<img id="image"/>

Related questions

Blob object to base64 in JavaScript

I am trying to implement a paste handler to get an image from user's clipboard. I want this to run only on Google Chrome, I am not worried with other browsers. This is a part of a method that I …

Read More
Get image data url in JavaScript?

I have a regular HTML page with some images (just regular <img /> HTML tags). I'd like to get their content, base64 encoded preferably, without the need to redownload the image (ie. it's already loaded by the browser, so …

Read More
How to save a base64 image to user's disk using JavaScript?

I have converted the source content from the <img> html tag to a base64String using JavaScript. The image was displayed clearly. Now I want to save that image to user's disk using javascript. <html> <…

Read More