Using JavaScript to display a Blob

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

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

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 bytesvar 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 bytesvar blob = new Blob([bytes], {type: 'image/bmp'});// Use createObjectURL to make a URL for the blobvar image = new Image();image.src = URL.createObjectURL(blob);document.body.appendChild(image);

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