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.

Marismarisa

What the format of the blob? Is this an image in some format (jpeg, png, gif etc.) or just RGB bytes? – Johnie

Should not it be document.createElement('img'); instead of document.createElement('image');? – Saucedo

Answer 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))

Marismarisa

Answer 2

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

Torques

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

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

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. – Urbas

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 – Rainband

Answer 3

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

Trucking

Will this automatically convert base64 as image is base64 encoded? – Mitrailleuse

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

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

Answer 4

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/

Tigrinya

Answer 5

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).

Lithia

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 – Marismarisa

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

Answer 6

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

Discontinue

Answer 7

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)

Marylou