Comment récupérer des images sous forme de blobs avec la méthode ajax de jQuery ?

Récupération d'images sous forme de blobs avec la méthode ajax de jQuery

Défi

La récupération d'images sous forme de blobs n'est pas prise en charge nativement par l'ajax de jQuery méthode, entraînant des incompatibilités de types de données et des images corrompues lors du téléchargement.

Solution : XMLHttpRequest natif

Pour récupérer une image en tant que blob, utilisez XMLHttpRequest natif :

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // this.response contains the blob
        handler(this.response);
    }
};
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();

Support jQuery 3.0

De nos jours, il est possible de récupérer des blobs avec jQuery 3.0 :

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() {
        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() {
        // Handle error
    }
});

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!