Ajax Binary Response

Question

Привет, мне интересно, есть ли способ передать двоичный ответ в AJAX? Это было бы окончательным решением, в противном случае мне нужно было бы реализовать двоичное изображение в файл, а затем передать этот файл пользователю с другим URL-адресом.

new Ajax.Request('/viewImage?id=123', {
  // request returns a binary image inputstream
  onSuccess: function(transport) {
      // text example
      // alert(transport.responseText)

      // QUESTION: is there a streaming binary response?
      $('imgElem').src = transport.responseBinary;
  },
  onFailure: function(transport) {
      // handle failure
  }
});

Answer 1

Может быть невозможно передавать двоичные данные, но вы можете использовать Ajax для извлечения двоичных данных.

Это возможно, используя один из двух методов: Javascript Типизированные массивы или XMLHttpResponse overrideMimeType hack. Прочитайте хорошую статью о MDN - оттуда взяты следующие примеры: Отправка и получение двоичных данных

Метод Typed Array выглядит следующим образом:

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

Типизированные массивы не поддерживаются в IE <10, Firefox <4, Chrome <7, Safari <5.1 и Opera <11.6, а поддержка мобильных устройств <a href="http://caniuse.com/typedarrays" rel="noreferrer"> шаткая, но улучшается .

Второй метод использует метод XMLHttpRequest с именем overrideMimeType, чтобы позволить двоичным данным передаваться без изменений.

var req = new XMLHttpRequest();
req.open('GET', '/myfile.png', false);
// XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
req.overrideMimeType('text\/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
// do stuff with req.responseText;

Вы получаете непарсированную двоичную строку, для которой вы можете использовать var byte = filestream.charCodeAt(x) & 0xff; для извлечения определенного байта.

Answer 2

Это продолжение ответа Тома Эшворта (который помог мне встать на правильный путь с проблемой, с которой я столкнулся). Это позволяет вам просто получить файловый поток (FileStreamResult, если вы используете asp.net mvc) и установить его в img src, что круто.

var oReq = new XMLHttpRequest();
oReq.open("post", '/somelocation/getmypic', true );        
oReq.responseType = "blob";
oReq.onload = function ( oEvent )
{
    var blob = oReq.response;
    var imgSrc = URL.createObjectURL( blob );                        
    var $img = $( '<img/>', {                
        "alt": "test image",
        "src": imgSrc
    } ).appendTo( $( '#bb_theImageContainer' ) );
    window.URL.revokeObjectURL( imgSrc );
};
oReq.send( null );

Основная идея заключается в том, что данные возвращаются без изменений, они помещаются в большой двоичный объект, а затем создается URL-адрес для этого объекта в памяти. См. здесь и здесь . Обратите внимание на поддерживаемые браузеры.

Answer 3

Что вы можете сделать, если вы пытаетесь создать изображение на лету, это просто сделать:

<img src="http://myurl/myfile.php?id=3" />

тогда вы можете отправить данные с соответствующим типом mimetype.

Если вы действительно хотите отправить изображение, то, возможно, захотите взглянуть на тег HTML5 canvas, но я не уверен, как с этим будет работать excanvas, потому что он кроссплатформенный.

Вы можете написать на холст, но было бы эффективнее просто использовать тег img.

Answer 4

Вы можете отправить любой желаемый ответ, будь то простой текст, HTML, изображение ... что угодно! Вам решать, как справиться с этим, когда вы его получите.

Но ... вы не можете назначить двоичное изображение атрибуту <IMG> src. Лучше просто вернуть URL-адрес изображения и назначить его вместо этого - ну, если честно, есть некоторые кодировки для встраивания изображений в SRC, но они не являются кросс-браузерными, поэтому вы захотите держаться от них подальше .