Using JavaScript to display a Blob

Question

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.

What the format of the blob? Is this an image in some format (jpeg, png, gif etc.) or just RGB bytes? — bjornd, Oct 04 '11 at 15:57
Should not it be `document.createElement('img');` instead of `document.createElement('image');?` — Pablo Lozano, Dec 21 '18 at 16:54

score 134 · Answer 1 · answered Jan 02 '15 at 05:17

134

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

answered Jan 02 '15 at 05:17

AdamZ

1,421
1
9
9

27

The important line is the ```urlCreator.createObjectURL(blob)``` which returns a imageUrl which can be assigned to an image src. – Agent47DarkSoul Jan 05 '16 at 13:01
7

Don't forget to revoke the created URL once you've finished with it by calling; revokeObjectURL – Ralpharoo Nov 03 '18 at 07:27
I'd assume, that OP's image is in some kind of field _in_ a db, i.e. OP can't get it _directly_. If he'd able to do so, he would most likely use an `img` - tag _directly_ instead of doing XHR / fetch; because both are prone to SOP. – Christian Ulbrich Jan 22 '20 at 12:44

Ogglas · Answer 2 · 2019-04-29T12:53:13.390

87

If you want to use fetch instead:

var myImage = document.querySelector('img');

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

Source:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

edited Apr 29 '19 at 12:53

answered May 19 '17 at 11:47

Ogglas

38,157
20
203
266

Will this automatically convert base64 as image is base64 encoded? – P Satish Patro Apr 24 '19 at 10:04
2

I love you.. i spent 4 hours trying to solve until I found this. – tinyCoder Aug 04 '20 at 11:05
What happens `if (typeof URL !== "function") {}` – zanderwar Oct 07 '20 at 09:59
If you vote down please add a comment why. Hard to improve answers otherwise. – Ogglas Mar 11 '21 at 22:52

nkron · Answer 3 · 2014-11-29T01:30:42.550

You can convert your string into a Uint8Array to get the raw data. Then create a Blob for that data and pass to URL.createObjectURL(blob) to convert the Blob into a URL that you pass to img.src.

var data = '424D5E070000000000003E00000028000000EF...';

// Convert the string to bytes
var bytes = new Uint8Array(data.length / 2);

for (var i = 0; i < data.length; i += 2) {
    bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
}

// Make a Blob from the bytes
var blob = new Blob([bytes], {type: 'image/bmp'});

// Use createObjectURL to make a URL for the blob
var image = new Image();
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);

You can try the complete example at: http://jsfiddle.net/nj82y73d/

score 15 · Answer 4 · answered Oct 04 '11 at 16:50

15

In your example, you should createElement('img').

In your link, base64blob != Base64.encode(blob).

This works, as long as your data is valid http://jsfiddle.net/SXFwP/ (I didn't have any BMP images so I had to use PNG).

answered Oct 04 '11 at 16:50

nachito

6,808
2
21
43

Good point on the img. You should note that 'img' is an html image element where 'image' is a html input element of type image, although in this case it did not make a difference. I am assuming that the image data *is* valid, as it is coming from a 3rd party source. Do you know anyway of testing this? Or an easy site that gives blob from uploaded image? I would like to test BMP's – GAgnew Oct 04 '11 at 17:59
The "blob" in your fiddle isn't actually a Blob. You used a base64 encoded string. – elliotwesoff Sep 05 '19 at 19:55

score 7 · Answer 5 · edited Jan 27 '17 at 12:30

I guess you had an error in the inline code of your image. Try this :

var image = document.createElement('img');
    
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
    
image.width=100;
image.height=100;
image.alt="here should be some image";
    
document.body.appendChild(image);

Helpful link :http://dean.edwards.name/my/base64-ie.html

score 3 · Accepted Answer · answered Oct 11 '11 at 15:22

3

The problem was that I had hexadecimal data that needed to be converted to binary before being base64encoded.

in PHP:

base64_encode(pack("H*", $subvalue))

answered Oct 11 '11 at 15:22

GAgnew

3,325
3
22
28

score 0 · Answer 7 · answered May 27 '20 at 11:42

In the fiddle your blob isn't a blob, it's a string representation of hexadecimal data. Try this on a blob and your done

var image = document.createElement('img');
let reader=new FileReader()
reader.addEventListener('loadend',()=>{
  let contents=reader.result
  image.src = contents
  document.body.appendChild(image);
})
if(blob instanceof Blob) reader.readAsDataURL(blob)

readAsDataURL give you a base64 encoded image ready for you image element () source (src)

Using JavaScript to display a Blob

7 Answers7

Linked