Usando il metodo ajax di jQuery per recuperare le immagini come un blob

Di recente ho fatto un’altra domanda (correlata) che ha portato a questa domanda di follow-up: Invio di dati anziché di un file per un modulo di input

Leggendo la documentazione di jQuery.ajax () ( http://api.jquery.com/jQuery.ajax/ ), sembra che l’elenco dei tipi di dati accettati non includa immagini.

Sto cercando di recuperare un’immagine utilizzando jQuery.get (o jQuery.ajax se necessario), memorizzare questa immagine in un BLOB e caricarla su un altro server in una richiesta POST. Attualmente, a causa della mancata corrispondenza tra i tipi di dati, le mie immagini finiscono per essere corrotte (dimensioni in byte non corrispondenti, ecc.).

Il codice per eseguire ciò è il seguente (è nel coffeescript ma non dovrebbe essere difficile da analizzare):

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) 

Come posso recuperare questa immagine come un blob, invece?

Non puoi farlo con jQuery ajax, ma con 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://sofit.miximages.com/jquery/logo.png'); xhr.responseType = 'blob'; xhr.send(); 

MODIFICARE

Quindi, rivisitando questo argomento, sembra che sia effettivamente ansible farlo 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){ var img = document.getElementById('img'); var url = window.URL || window.webkitURL; img.src = url.createObjectURL(data); }, error:function(){ } }); 
   

Un grande ringraziamento a @Musa e qui c’è una bella funzione che converte i dati in una stringa base64. Questo può tornare utile quando si gestisce un file binario (pdf, png, jpeg, docx, …) in una WebView che ottiene il file binario ma è necessario trasferire i dati del file in sicurezza nella propria app.

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