Using JavaScript to display a Blob

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.

8 Answers

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", ""); 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/> 

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:

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:

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

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

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

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 :

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)

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

I have also try to give answer here in my website: