Usando el método ajax de jQuery para recuperar imágenes como un blob

La guía o código que verás en este post es la solución más eficiente y efectiva que encontramos a tu duda o problema.

Solución:

No puede hacer esto con jQuery ajax, pero con XMLHttpRequest nativo.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
    if (this.readyState == 4 && this.status == 200)

xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();      

---

EDITAR

Entonces, revisando este tema, parece que es posible hacer esto con jQuery 3

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),
        error:function()
            
        
    );

o

use xhrFields para establecer el tipo de respuesta

    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,
            xhrFields:
                responseType: 'blob'
            ,
            success: function(data) window.webkitURL;
                img.src = url.createObjectURL(data);
            ,
            error:function()
                
            
        );

Si lo necesitas manejar mensajes de error utilizando jQuery.AJAX necesitaras modificar el xhr función entonces el responseType no se modifica cuando ocurre un error.

Entonces tendrás que modificar el responseType para “gota” solo si es una llamada exitosa:

$.ajax(
    ...
    xhr: function() 
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() 
            if (xhr.readyState == 2) 
                if (xhr.status == 200) 
                    xhr.responseType = "blob";
                 else 
                    xhr.responseType = "text";
                
            
        ;
        return xhr;
    ,
    ...
    error: function(xhr, textStatus, errorThrown) 
        // Here you are able now to access to the property "responseText"
        // as you have the type set to "text" instead of "blob".
        console.error(xhr.responseText);
    ,
    success: function(data) 
        console.log(data); // Here is "blob" type
    
);

---

Nota

Si depura y coloca un punto de interrupción en el punto justo después de configurar el xhr.responseType para “gota” puede notar que si intenta obtener el valor de responseText obtendrá el siguiente mensaje:

Solo se puede acceder al valor si el ‘responseType’ del objeto es ” o ‘texto’ (era ‘blob’).

Muchas gracias a @Musa y aquí hay una función ordenada que convierte los datos a una base64 string. Esto puede resultarle útil cuando maneje un archivo binario (pdf, png, jpeg, docx, …) en un WebView que obtiene el archivo binario pero necesita transferir los datos del archivo de forma segura a su aplicación.

// runs a get/post on url with post variables, where:
// url ... your url
// post ... 'key1':'value1', 'key2':'value2', ...
//          set to null if you need a GET instead of POST req
// done ... function(t) called when request returns
function getFile(url, post, done)

   var postEnc, method;
   if (post == null)
   
      postEnc = '';
      method = 'GET';
   
   else
   
      method = 'POST';
      postEnc = new FormData();
      for(var i in post)
         postEnc.append(i, post[i]);
   
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() 
      if (this.readyState == 4 && this.status == 200)
      
         var res = this.response;
         var reader = new window.FileReader();
         reader.readAsDataURL(res); 
         reader.onloadend = function()  done(reader.result.split('base64,')[1]); 
      
   
   xhr.open(method, url);
   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   xhr.send('fname=Henry&lname=Ford');
   xhr.responseType = 'blob';
   xhr.send(postEnc);

Si te gusta este mundo, tienes la libertad de dejar una reseña acerca de qué te ha gustado de esta noticia.

---

---

Utiliza Nuestro Buscador