Getting BLOB data from XHR request

blob, javascript, webkit, xmlhttprequest

Solution

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

Problem

``` 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!

Original source