Getting BLOB data from XHR request in ionic 2 - ionic-framework

Question

Can any one tel that how to GET Blob XHR request and XMLHttpRequest in ionic 2 , i have to fetch image url from the api .
This is my Ajax Code, i want in ionic 2
xhr.open('GET', "https://getbytitle('LE_COE_Mapping')/items(2)/AttachmentFiles('3.jpg')/$value");
xhr.responseType = 'blob';
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// xhr.setRequestHeader('Authorization', 'Token token="' + token + '"');
xhr.setRequestHeader('Authorization', token);
xhr.onload = function (e) {
var img = new Image();
var url = window.URL || window.webkitURL;
img.src = url.createObjectURL(this.response);
document.getElementById('Doctitle').appendChild(img);
// alert(url.createObjectURL(this.response));
};
xhr.send();
Please i am stuck in this from the last two days.
Please Help me.
Thanks

Answer 1

I also got stuck in same problem once then this what I did :
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
//this.response is your final response
console.log(this.response, typeof this.response);
var img = // your img syntax
//your any custom code goes here
}else{
//show error message if you want to show
}
}
xhr.open('GET', 'http://Your image url');// image url be like http://ab.cd/img.png
xhr.responseType = 'blob';
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
//xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//send authorisation if you sending token
xhr.send();
Hope this will help you.

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