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