Getting BLOB data from XHR request
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()
orFileReader.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!
Solution 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();
Solution 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
Solution 3:
XMLHttpRequest
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', 'http://RestServiceURL-Returns Image', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.responseType = 'arraybuffer/blob';
xmlhttp.send();
creating blob image in 3-ways.
- window.URL.createObjectURL
- FileReader (caniuse)
-
Base64String
xmlhttp.onload = function() { var blob = new Blob([this.response], {type: 'image/png'}); console.log(blob, blob.type, this.response, typeof this.response); var image = document.getElementById('my-image'); 1)image.src = window.URL.createObjectURL(blob); 2)var fileReader = new window.FileReader(); fileReader.readAsDataURL(blob); fileReader.onloadend = function() { image.src = fileReader.result; } 3)var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.response))); image.src = 'data:image/png;base64,'+base64String; };
Converting ArrayBuffer to Blob to ArrayBuffer
1)var dataView = new DataView(arrayBuffer);
var blob = new Blob([dataView], { type: mimeString });
2)fileReader.readAsArrayBuffer(blob);
var arrayBuffer;
fileReader.onload = function() {
arrayBuffer = this.result;
};
Solution 4:
Same solution as suggested by Janus Troelsen with promise added...
Note! when using createObjectURL - don't forget to call revokeObjectURL
// Load blob (promise)
function loadBlob( url ){
return new Promise( (resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => resolve(xhr.response);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
// Create image from blob (createObjectURL)
function imageFromBlob( blob ){
const img = new Image();
img.onload = () => URL.revokeObjectURL(img.src);
img.src = URL.createObjectURL(blob);
return img;
}
// Create image from blob if loaded successfully
loadBlob('https://unsplash.it/960/540?random')
.then( blob => {
document.body.appendChild( imageFromBlob(blob) );
})
.catch( error => {
console.log('Could not load image');
})
// Alternate version adding promise to xhr
// if you like to trigger xhr.send() yourself
function xhrBlob(url){
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.promise = new Promise((resolve, reject) => {
xhr.onload = () => resolve(xhr.response);
xhr.onerror = () => reject(xhr.statusText);
});
xhr.load = ( onsuccess = () => {}, onerror = () => {} ) => {
xhr.promise.then(onsuccess).catch(onerror);
xhr.send();
return xhr;
}
return xhr;
}
// Using load callbacks
xhrBlob('https://unsplash.it/960/540?random')
.load(
// on sussess
blob => {
document.body.appendChild( imageFromBlob(blob) );
},
// on error
error => {
console.log('Could not load image');
}
);
// Using promise (delayed)
const image = xhrBlob('https://unsplash.it/960/540?random');
// Promise handlers
image.promise
.then( blob => {
document.body.appendChild( imageFromBlob(blob) );
})
.catch( error => {
console.log('Could not load image');
});
// Load image (will trigger promise handlers)
setTimeout(image.load, 3000);
img {
width: 100%;
}