Getting BLOB data from XHR request

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