Bilder als Blobs mit jQuery

In einer früheren Frage haben Sie versucht, Bilddaten in einer Postanfrage einzureichen. Ihr aktueller Ansatz beinhaltet die Verwendung von jQuery.ajax zum Abrufen des Bildes, aber Sie begegnen korrupte Bilder aufgrund von Datentyp -Missverhältnissen.

Limited jQuery -Datentypen

jquery.ajax Support mehrere Datentypen, aber es werden keine Bilder enthalten. Daher ist es nicht machbar, ein Bild als Blob mit JQuery zugreifen zu können. Hier ist ein Beispiel:

var xhr = new xmlhttprequest (); xhr.onreadyStatechange = function () { if (this.readyState == 4 && this.status == 200) { var img = document.getElementById ('img'); var url = window.url || Fenster.Webkiturl; img.src = url.createObjecturl (this.Response); } } xhr.open ('get', 'http://jsfiddle.net/img/logo.png'); xhr.responsetype = 'blob'; xhr.send (); Dieses Skript erstellt ein xmlhttpRequest -Objekt, konfigurieren Sie es, um eine Blob -Antwort zu erhalten, und verwendet die Eigenschaft Blob URL, um das Bild in einem HTML -Element anzuzeigen. Verfügbar:

jquery.ajax ({{{{{{ URL: 'https: //images.unsplash.com/photo-1465101108990-e5eac17cf76d? ixlib = rb-0.3.5 & q = 85 & fm = j pg & crop = entropy & cs = srgb & ixid = eyjhchbfawqioje0ntg5fq == & s = 471AE675A6140DB97FEA32B55781479E ', Cache: Falsch, XHR: function () {// scheint der einzige Weg, um Zugriff auf das XHR -Objekt zu erhalten var xhr = new xmlhttprequest (); xhr.responsetype = 'Blob' Rückgabe xhr; }, Erfolg: Funktion (Daten) { var img = document.getElementById ('img'); var url = window.url || Fenster.Webkiturl; img.src = url.createObjecturl (Daten); }, Fehler: function () { } });

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();