Getting BLOB data from XHR request

Question

var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://static.reddit.com/reddit.com.header.png', true);  xhr.responseType = 'arraybuffer';  xhr.onload = function(e) {   if (this.status == 200) {     var uInt8Array = new Uint8Array(this.response);     var byte3 = uInt8Array[4];       var bb = new WebKitBlobBuilder();     bb.append(xhr.response);     var blob = bb.getBlob('image/png');      var base64 = window.btoa(blob);     alert(base64);    } };  xhr.send(); 

Basically, what I am trying to do here is retrieve an image, and convert it to base64.

From reading in the comments here, it states:

"Sure. After fetching a resource as an ArrayBuffer, create a blob from it. Once you have that, you could base64 encode the file/blob directly window.btoa() or FileReader.readAsDataURL()."

However, blob is just [object blob], while I need to get the binary from the image so I can convert it to base64 and display it in a img tag using data.

Anyone know how to achieve this?

Thank you in advance!

Answer 1

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

Answer 2

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