Récupération des images en tant que blobs en utilisant jQuery

Dans une question précédente, vous avez tenté de soumettre des données d'image dans une demande post-demande. Votre approche actuelle consiste à utiliser jQuery.ajax pour récupérer l'image, mais vous rencontrez des images corrompues en raison de non-appariements du type de données. Par conséquent, l'accès à une image en tant que blob utilisant jQuery seul n'est pas possible.

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 utilise la propriété BLOB URL pour afficher l'image dans un élément html. Disponible:

jQuery.ajax ({ URL: 'https: //images.unsplash.com/photo-1465101108990-e5eac17cf76d? ixlib = rb-0.3.5 & q = 85 & fm = J pg & crop = entropy & cs = srgb & ixid = eyjhchbfawqioje0ntg5fq == & s = 471ae675a6140db97fea32b55781479e ', cache: faux, xhr: function () {// semble être le seul moyen d'accéder à l'objet XHR var xhr = new xmlHttpRequest (); xhr.ResponSetype = 'Blob' retour xhr; }, Succès: fonction (données) { var img = document.getElementById ('img'); var url = window.url || window.webkiturl; img.src = url.createObjectUrl (data); }, error: function () { } });

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