Getting BLOB data from XHR request

XMLHttpRequest

var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', 'http://RestServiceURL-Returns Image', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.responseType = 'arraybuffer/blob';
xmlhttp.send();

creating blob image in 3-ways.

• window.URL.createObjectURL
• FileReader (caniuse)

• Base64String

  xmlhttp.onload = function() {
      var blob = new Blob([this.response], {type: 'image/png'}); 
      console.log(blob, blob.type, this.response, typeof this.response);  
  
      var image = document.getElementById('my-image');
  
      1)image.src = window.URL.createObjectURL(blob);
  
      2)var fileReader = new window.FileReader();
      fileReader.readAsDataURL(blob);
      fileReader.onloadend = function() { 
      image.src = fileReader.result;
      }
  
      3)var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.response)));
      image.src = 'data:image/png;base64,'+base64String;
  };
  

Converting ArrayBuffer to Blob to ArrayBuffer

1)var dataView = new DataView(arrayBuffer);
var blob = new Blob([dataView], { type: mimeString });


2)fileReader.readAsArrayBuffer(blob);
var arrayBuffer;
fileReader.onload = function() {
    arrayBuffer = this.result;
};

Don't use BlobBuilder in Chrome (tested in OSX Chrome, Firefox 12, Safari 6, iOS Chrome, iOS Safari):

ex1 : http://jsfiddle.net/malraux/xGUsu/ (principle)

ex2: http://jsfiddle.net/xGUsu/78/ (working with full example)

var xhr = new XMLHttpRequest();
xhr.open('GET', 'doodle.png', true);

xhr.responseType = 'arraybuffer';

// Process the response when the request is ready.
xhr.onload = function(e) {
  if (this.status == 200) {
    // Create a binary string from the returned data, then encode it as a data URL.
    var uInt8Array = new Uint8Array(this.response);
    var i = uInt8Array.length;
    var binaryString = new Array(i);
    while (i--)
    {
      binaryString[i] = String.fromCharCode(uInt8Array[i]);
    }
    var data = binaryString.join('');

    var base64 = window.btoa(data);

    document.getElementById("myImage").src="data:image/png;base64," + base64;
  }
};

xhr.send();

Note: This code is over 7 years old at this point. While it should still function in most browsers, here's an updated version based on a suggestion by @TypeError that will only work in more modern browsers with the possible exception of iOS Safari (which may or may not support responseType = 'blob' - make sure to test!):

var xhr = new XMLHttpRequest();
xhr.open('get', 'doodle.png', true);

// Load the data directly as a Blob.
xhr.responseType = 'blob';

xhr.onload = () => {
  document.querySelector('#myimage').src = URL.createObjectURL(this.response);
};

xhr.send(); 

You can fetch a Blob and use window.URL.createObjectURL. This prevents building giant strings and copying everything a couple of times.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://i.imgur.com/sBJOoTm.png', true);

xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
    document.getElementById("myImage").src = window.URL.createObjectURL(blob);
  }
};

xhr.onerror = function(e) {
  alert("Error " + e.target.status + " occurred while receiving the document.");
};

xhr.send();

<img id="myImage">

Example (same code): http://jsfiddle.net/ysangkok/sJxXk/86/ . Works in Firefox and Chrome 25+. And all other browsers except Opera Mini: http://caniuse.com/#search=Blob