Maison >interface Web >js tutoriel >Comment récupérer des images sous forme de blobs à l'aide de jQuery et JavaScript ?

Comment récupérer des images sous forme de blobs à l'aide de jQuery et JavaScript ?

DDD
DDDoriginal
2024-11-10 21:17:02862parcourir

How to Retrieve Images as Blobs Using jQuery and JavaScript?

Récupération d'images sous forme de blobs à l'aide de jQuery

Dans une question précédente, vous avez tenté de soumettre des données d'image dans une requête POST. Votre approche actuelle consiste à utiliser jQuery.ajax pour récupérer l'image, mais vous rencontrez des images corrompues en raison de non-concordances de types de données.

Types de données jQuery limités

jQuery.ajax prend en charge plusieurs types de données mais n'inclut pas explicitement les images. Par conséquent, accéder à une image en tant que blob en utilisant jQuery seul n'est pas réalisable.

Solution XMLHttpRequest native

Pour résoudre ce problème, vous pouvez utiliser XMLHttpRequest natif. Voici un exemple :

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

Ce script créera un objet XMLHttpRequest, le configurera pour recevoir une réponse blob et utilisera la propriété URL Blob pour afficher l'image dans un élément HTML.

Solution jQuery 3

Dans jQuery 3, une nouvelle approche est disponible :

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

Dans cet exemple, la fonction xhr est utilisée pour configurer l'objet XMLHttpRequest, et le type de réponse est explicitement défini sur « blob ». Cela permet à jQuery de récupérer l'image sous forme de blob et de l'afficher dans l'élément image.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn