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
– bjornd, Commented Oct 4, 2011 at 15:57
Should not it be document.createElement('img'); instead of document.createElement('image');? — Pablo Lozano
– Pablo Lozano, Commented Dec 21, 2018 at 16:54

AdamZ · Accepted Answer · 2015-01-02 05:17:34Z

195

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 2, 2015 at 5:17

AdamZ

2,0311 gold badge13 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Agent47DarkSoul Over a year ago

The important line is the urlCreator.createObjectURL(blob) which returns a imageUrl which can be assigned to an image src.

Ralpharoo Over a year ago

Don't forget to revoke the created URL once you've finished with it by calling; revokeObjectURL

Christian Ulbrich Over a year ago

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.

José Henrique Over a year ago

That worked like a charm. Also, IDK why people are not talking about the fact that axios can return blobs by just adding responseType: 'blob'. That saved me the hassle of converting anything. Also tested on chrome, both window.URL andwindow.webkitURL are truthy

Ogglas · Accepted Answer · 2019-04-29 12:53:13Z

144

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, 2019 at 12:53

answered May 19, 2017 at 11:47

Ogglas

71.4k43 gold badges388 silver badges484 bronze badges

3 Comments

Satish Patro Over a year ago

Will this automatically convert base64 as image is base64 encoded?

zanderwar Over a year ago

What happens if (typeof URL !== "function") {}

Ogglas Over a year ago

If you vote down please add a comment why. Hard to improve answers otherwise.

nkron · Accepted Answer · 2014-11-29 01:30:42Z

31

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/

edited Nov 29, 2014 at 1:30

answered Nov 29, 2014 at 1:21

nkron

19.8k3 gold badges42 silver badges27 bronze badges

Comments

nachito · Accepted Answer · 2011-10-04 16:50:54Z

19

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 4, 2011 at 16:50

nachito

7,0352 gold badges28 silver badges44 bronze badges

2 Comments

GAgnew Over a year ago

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

elliotwesoff Over a year ago

The "blob" in your fiddle isn't actually a Blob. You used a base64 encoded string.

Chanthu · Accepted Answer · 2017-01-27 12:30:13Z

14

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

edited Jan 27, 2017 at 12:30

Chanthu

1,7941 gold badge15 silver badges23 bronze badges

answered Oct 4, 2011 at 16:55

marius_neo

1,6051 gold badge15 silver badges28 bronze badges

Comments

Bruno · Accepted Answer · 2020-05-27 11:42:43Z

5

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)

answered May 27, 2020 at 11:42

Bruno

4646 silver badges13 bronze badges

Comments

GAgnew · Accepted Answer · 2011-10-11 15:22:41Z

-1

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, 2011 at 15:22

GAgnew

4,1053 gold badges28 silver badges29 bronze badges

Collectives™ on Stack Overflow

Using JavaScript to display a Blob

7 Answers 7

4 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related