Comment puis-je récupérer une image en tant que Blob à l'aide de la méthode ajax de jQuery ?

Utilisation de la méthode ajax de jQuery pour récupérer des images sous forme de blobs

Contexte :
Comme indiqué dans une question précédente, il est nécessaire de récupérez une image à l'aide de jQuery et stockez-la en tant que Blob pour une utilisation ultérieure dans une requête POST. Cependant, les dataTypes de jQuery ne mentionnent pas explicitement les images.

Problème :
Le code actuel dans CoffeeScript (et son équivalent JavaScript) tente de récupérer une image en utilisant jQuery.get() et stockez-le dans un objet FormData en tant que Blob. Cependant, cette approche entraîne des images corrompues en raison d'une inadéquation dans les types de données.

Question :
Existe-t-il une méthode réalisable pour récupérer une image en tant que Blob à l'aide de la méthode ajax de jQuery ?

Réponse :

Approche 1 : Utilisation de XMLHttpRequest natif

Il n'est pas possible de récupérer une image en tant que Blob en utilisant La méthode ajax de jQuery seule. Cependant, l'utilisation de XMLHttpRequest natif fournit une solution. Voici un extrait de code JavaScript :

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

Dans ce code, un objet XMLHttpRequest est créé et son type de réponse est défini sur « blob ». L'événement onreadystatechange est utilisé pour gérer la réponse et créer une URL d'objet pour l'image.

Approche 2 : Utilisation de jQuery 3

Cependant, il convient de mentionner qu'avec jQuery version 3, il est désormais possible de récupérer des images sous forme de Blobs. Voici un extrait de code JavaScript révisé utilisant 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(){
        
    }
});

Dans cet extrait, nous utilisons la fonction xhr() de jQuery pour obtenir l'accès à l'objet XMLHttpRequest et définir son type de réponse sur « blob ». Cela nous permet de récupérer l'image sous forme de Blob et de l'utiliser comme nous le souhaitons.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!