Recuperando imágenes como blobs usando jQuery

En una pregunta anterior, intentó enviar datos de imagen en una solicitud de publicación. Su enfoque actual implica usar jQuery.AJAX para recuperar la imagen, pero se encuentra con imágenes corruptas debido a los desajustes de tipo de datos.

limitados tipos de datos

jQuery.AJAX admite varios tipos de datos pero no incluye explícitamente imágenes. Por lo tanto, acceder a una imagen como un blob usando solo jQuery no es factible.

solución nativa xmlhttprequest

para resolver este problema, puede emplear xmlhttprequest nativo. Aquí hay un ejemplo:

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

Este script creará un objeto xmlhttprequest, configúrelo para recibir una respuesta blob y usará la propiedad de URL de blob para mostrar la imagen en un elemento html.

jQuery 3 solución en jQuery 3, un nuevo enfoque es Disponible:

jQuery.AJAX ({ URL: 'https: //images.unsplash.com/photo-1465101108990-e5eac17cf76d? ixlib = rb-0.3.5 & q = 85 & fm = j = j PG & Crop = entropy & cs = srgb & ixid = eyjhchbfawqioje0ntg5fq == & s = 471ae675a6140db97fea32b55781479e ', caché: falso, xhr: function () {// parece la única forma de obtener acceso al objeto XHR var xhr = new xmlhttprequest (); xhr.responseType = 'Blob' regresar xhr; }, éxito: function (data) { var img = document.getElementById ('img'); var url = window.url || Window.webkiturl; img.src = url.createObjectUrl (datos); }, Error: function () { } });

En este ejemplo, la función XHR se usa para configurar el objeto xmlhttprequest, y el tipo de respuesta se establece explícitamente en 'blob'. Esto le permite a JQuery recuperar la imagen como un blob y mostrarla en el elemento de imagen.