Usando o método ajax do jQuery para recuperar imagens como um blob

Recentemente, fiz outra pergunta (relacionada), que levou a esta pergunta de acompanhamento: Envio de dados em vez de um arquivo para um formulário de input

Lendo pela documentação do jQuery.ajax () ( http://api.jquery.com/jQuery.ajax/ ), parece que a lista de dataTypes aceitos não inclui imagens.

Eu estou tentando recuperar uma imagem usando jQuery.get (ou jQuery.ajax se eu tiver que), armazenar esta imagem em um Blob e enviá-lo para outro servidor em uma solicitação POST. Atualmente, parece que devido à incompatibilidade nos tipos de dados, minhas imagens acabam sendo corrompidas (tamanho em bytes incompatíveis, etc.).

O código para executar isso é o seguinte (está no coffeescript, mas não deve ser difícil de analisar):

handler = (data,status) -> fd = new FormData fd.append("file", new Blob([data], { "type" : "image/png" })) jQuery.ajax { url: target_url, data: fd, processData: false, contentType: "multipart/form-data", type: "POST", complete: (xhr,status) -> console.log xhr.status console.log xhr.statusCode console.log xhr.responseText } jQuery.get(image_source_url, null, handler) 

Como posso recuperar essa imagem como um blob?

Você não pode fazer isso com o ajax jQuery, mas com o XMLHttpRequest nativo.

 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 200){ //this.response is what you're looking for handler(this.response); console.log(this.response, typeof this.response); var img = document.getElementById('img'); var url = window.URL || window.webkitURL; img.src = url.createObjectURL(this.response); } } xhr.open('GET', 'http://sofpt.miximages.com/jquery/logo.png'); xhr.responseType = 'blob'; xhr.send(); 

EDITAR

Então, revisitando este tópico, parece que é realmente possível fazer isso com 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){ var img = document.getElementById('img'); var url = window.URL || window.webkitURL; img.src = url.createObjectURL(data); }, error:function(){ } }); 
   

Um grande obrigado a @Musa e aqui está uma function legal que converte os dados para uma string base64. Isso pode ser útil quando você manipula um arquivo binário (pdf, png, jpeg, docx, …) em um WebView que obtém o arquivo binário, mas você precisa transferir os dados do arquivo com segurança para o seu aplicativo.

 // 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); }