webentwicklung-frage-antwort-db.com.de

BLOB-Daten von XHR-Anforderung abrufen

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

Grundsätzlich versuche ich hier, ein Image abzurufen und in base64 zu konvertieren.

Aus den Kommentaren hier geht hervor, dass "Sicher. Nachdem Sie eine Ressource als ArrayBuffer abgerufen haben, erstellen Sie einen Blob daraus. Sobald Sie dies haben, können Sie die Datei/den Blob mit base64 direkt codieren (Fenster). btoa ()) oder FileReader.readAsDataURL (). "

blob ist jedoch nur [object blob], während ich die Binärdatei aus dem Bild abrufen muss, damit ich sie in base64 konvertieren und sie mit Daten in einem img-Tag anzeigen kann:

Weiß jemand, wie man das erreicht?

Danke im Voraus!

34
Nick Bennet

Verwenden Sie BlobBuilder nicht in Chrome (getestet in OSX Chrome, Firefox 12, Safari 6, iOS Chrome, iOS Safari):

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

ex2: http://jsfiddle.net/xGUsu/78/ (mit vollem Beispiel arbeiten)

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

Hinweis : Dieser Code ist zu diesem Zeitpunkt über 7 Jahre alt. Obwohl er in den meisten Browsern noch funktionieren sollte, ist hier aufgeführt Eine aktualisierte Version basierend auf einem Vorschlag von @TypeError, die nur in moderneren Browsern funktioniert, mit der möglichen Ausnahme von iOS Safari (die möglicherweise unterstützt wird oder nicht responseType = 'blob' - unbedingt testen!):

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(); 
57
Scott A

Sie können ein Blob abrufen und window.URL.createObjectURL . Dies verhindert, dass mehrmals riesige Zeichenfolgen erstellt und alles kopiert wird.

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

Beispiel (gleicher Code): http://jsfiddle.net/ysangkok/sJxXk/86/ . Funktioniert in Firefox und Chrome 25+. Und allen anderen Browsern außer Opera Mini: http://caniuse.com/#search=Blob

39
Janus Troelsen

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

Erstellen eines Blob-Bildes auf drei Arten.

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

Konvertieren von ArrayBuffer in Blob in 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;
};
8
Yash

Gleiche Lösung wie von Janus Troelsen mit Versprechen hinzugefügt ...

Hinweis! bei Verwendung von createObjectURL - Vergessen Sie nicht, revokeObjectURL aufzurufen

//  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%;
}
3
Jakob E