Использование jQuery ajax-метода для извлечения изображений в виде blob

Недавно я задал другой (связанный) вопрос, который приводит к следующему вопросу: Отправка данных вместо файла для входной формы

Чтение документации jQuery.ajax() (http://api.jquery.com/jQuery.ajax/), похоже, что список принятых типов данных не включает изображения.

Я пытаюсь получить изображение с помощью jQuery.get(или jQuery.ajax, если нужно), сохраните это изображение в Blob и загрузите его на другой сервер в запросе POST. В настоящее время это похоже на несоответствие типов данных, мои изображения в конечном итоге повреждены (размер в несоответствии байтов и т.д.).

Код для выполнения этого выглядит следующим образом (он находится в файле coffeescript, но его не должно быть сложно разобрать):

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)

Как я могу получить это изображение в виде капли вместо этого?

Ответ 1

Вы не можете сделать это с помощью jQuery ajax, но с собственным XMLHttpRequest.

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://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();

http://jsfiddle.net/mowglisanu/9xY46/58/show
http://jsfiddle.net/mowglisanu/9xY46/58

Ответ 2

Большое спасибо @Musa, и вот аккуратная функция, которая преобразует данные в строку base64. Это может пригодиться вам при работе с двоичным файлом (pdf, png, jpeg, docx,...) в WebView, который получает двоичный файл, но вам нужно безопасно переносить данные файла в ваше приложение.

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