Getting Blob Data from Xhr Request

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

Getting BLOB data from XHR request in ionic 2

what i solved this below:
this.array: this is the url which we pass to get the blob url of the particular url:

const headers1 = new HttpHeaders({
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': "Bearer " + this.accessToken,
                'X-Requested-With': 'XMLHttpRequest'
              })
               const response = await this.http.get(this.array + "/$value", { headers: headers1, responseType: 'blob' }).toPromise();

              let b: any = new Blob([response], { type: 'application/octet-stream' });
              var url = window.URL.createObjectURL(b);
              console.log("this is url BLOB   " + url);

Loading image with XHR without responseType set to blob

Finally got it: If you do not want to have xhr.responseType = 'blob' and you want to create a url from received data, then you need to set xhr.responseType = 'arraybuffer'. This allows to convert the binary xhr.response into a blob and then create a URL.createObjectURL.

The point is that when you do not set responseType to a binary type then you get the default xhr.responseType = 'text' and utf8 encoding. And then blob creation fails.

I have included this solution in your stackblitz.

Read data from blob url

I've done some research because I'm also interessted in this question and I think the only possibility is do to a XHR request. I think it was already disscussed here: How to get a file or blob from an object URL?

If you have a blob you can convert it with FileReader to a ArrayBuffer. But maybe also the following could work:

xhr.responseType = 'arraybuffer';

---

Related Topics