Wie rufe ich Bilder als Blobs mit jQuery und JavaScript ab?

Bilder als Blobs mit jQuery abrufen

In einer früheren Frage haben Sie versucht, Bilddaten in einer POST-Anfrage zu übermitteln. Ihr aktueller Ansatz besteht darin, jQuery.ajax zum Abrufen des Bildes zu verwenden, aber Sie stoßen auf beschädigte Bilder aufgrund von Datentypkonflikten.

Begrenzte jQuery-Datentypen

jQuery.ajax unterstützt mehrere Datentypen, schließt Bilder jedoch nicht explizit ein. Daher ist der Zugriff auf ein Bild als Blob allein mit jQuery nicht möglich.

Native XMLHttpRequest-Lösung

Um dieses Problem zu beheben, können Sie natives XMLHttpRequest verwenden. 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 || window.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, konfiguriert es für den Empfang einer Blob-Antwort und verwendet die Blob-URL-Eigenschaft, um das Bild in einem HTML-Element anzuzeigen.

jQuery 3-Lösung

In jQuery 3 ist ein neuer Ansatz verfügbar:

jQuery.ajax({
        url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
        cache:false,
        xhr:function(){// Seems like the only way to get access to the xhr object
            var xhr = new XMLHttpRequest();
            xhr.responseType= 'blob'
            return xhr;
        },
        success: function(data){
            var img = document.getElementById('img');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(data);
        },
        error:function(){
            
        }
    });

In diesem Beispiel wird die xhr-Funktion verwendet, um das XMLHttpRequest-Objekt zu konfigurieren, und Der Antworttyp ist explizit auf „blob“ festgelegt. Dadurch kann jQuery das Bild als Blob abrufen und im Bildelement anzeigen.

Das obige ist der detaillierte Inhalt vonWie rufe ich Bilder als Blobs mit jQuery und JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!