javascript - new - Obteniendo datos BLOB de la solicitud XHR

xmlhttprequest responsetext

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

Básicamente, lo que trato de hacer aquí es recuperar una imagen y convertirla a base64.

De la lectura en los comentarios here , dice "Claro. Después de buscar un recurso como un ArrayBuffer, cree un blob. Una vez que tenga eso, podría base64 codificar el archivo / blob directamente (window.btoa ()) o FileReader. readAsDataURL (). "

Sin embargo, blob es solo [blob de objeto], mientras que necesito obtener el binario de la imagen para poder convertirlo a base64 y mostrarlo en una etiqueta img usando datos:

Alguien sabe cómo lograr esto?

¡Gracias de antemano!

Answer 1

La misma solución sugerida por Janus Troelsen con promesa añadida ...

¡Nota! al usar createObjectURL , no olvides llamar a 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%;
}

Answer 2

No utilice BlobBuilder en Chrome (probado en OSX Chrome, Firefox 12, Safari 6, iOS Chrome, iOS Safari):

ex1: http://jsfiddle.net/malraux/xGUsu/ (principio)

ex2: http://jsfiddle.net/xGUsu/78/ (trabajando con el ejemplo completo)

var xhr = new XMLHttpRequest();
xhr.open(''GET'', ''doodle.png'', true);
xhr.responseType = ''arraybuffer'';
xhr.onload = function(e) {
if (this.status == 200) {
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();

Answer 3

Puede buscar un Blob y usar window.URL.createObjectURL . Esto evita construir cadenas gigantes y copiar todo un par de veces.

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">

Ejemplo (mismo código): http://jsfiddle.net/ysangkok/sJxXk/86/ . Funciona en Firefox y Chrome 25+. Y todos los demás navegadores excepto Opera Mini: http://caniuse.com/#search=Blob

Answer 4

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

creando una imagen de blob en 3 formas.

• 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;
  };

Convirtiendo ArrayBuffer en http://caniuse.com/#search=Blob en 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;
};