Wie kann ich mit der Ajax-Methode von jQuery ein Bild als Blob abrufen?

Verwenden der Ajax-Methode von jQuery zum Abrufen von Bildern als Blobs

Hintergrund:
Wie in einer vorherigen Frage besprochen, besteht die Notwendigkeit Rufen Sie ein Bild mit jQuery ab und speichern Sie es als Blob zur späteren Verwendung in einer POST-Anfrage. Allerdings erwähnen die dataTypes von jQuery Bilder nicht explizit.

Problem:
Der aktuelle Code in CoffeeScript (und seinem JavaScript-Äquivalent) versucht, ein Bild mit jQuery.get() abzurufen und Speichern Sie es in einem FormData-Objekt als Blob. Dieser Ansatz führt jedoch aufgrund einer Nichtübereinstimmung der Datentypen zu beschädigten Bildern.

Frage:
Gibt es eine praktikable Methode, um ein Bild als Blob mithilfe der Ajax-Methode von jQuery abzurufen?

Antwort:

Ansatz 1: Verwenden von Native XMLHttpRequest

Es ist nicht möglich, ein Bild als Blob abzurufen Allein die Ajax-Methode von jQuery. Die Verwendung von nativem XMLHttpRequest bietet jedoch eine Lösung. Hier ist ein JavaScript-Snippet:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof this.response);
        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(); 

In diesem Code wird ein XMLHttpRequest-Objekt erstellt und sein ResponseType wird auf „blob“ gesetzt. Das onreadystatechange-Ereignis wird verwendet, um die Antwort zu verarbeiten und eine Objekt-URL für das Bild zu erstellen.

Ansatz 2: Verwendung von jQuery 3

Es ist jedoch erwähnenswert, dass mit Mit jQuery Version 3 ist es jetzt möglich, Bilder als Blobs abzurufen. Hier ist ein überarbeiteter JavaScript-Snippet mit jQuery 3:

$.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 Snippet verwenden wir die xhr()-Funktion von jQuery, um Zugriff auf das XMLHttpRequest-Objekt zu erhalten und seinen ResponseType auf „blob“ zu setzen. Dadurch können wir das Bild als Blob abrufen und wie gewünscht verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit der Ajax-Methode von jQuery ein Bild als Blob abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!