Ajax Binary Response

Question

Hallo Ich frage mich, ob es sowieso gibt, eine binäre Antwort in AJAX zu streamen? Dies wäre eine ultimative Lösung, ansonsten müsste ich das binäre Bild in eine Datei konvertieren und diese Datei dann mit einer anderen URL an den Benutzer streamen.

Answer 1

Sie können jede Antwort senden, die Sie wollen, sei es Klartext, HTML, ein Bild ... was auch immer! Es liegt an Ihnen, wie Sie damit umgehen, wenn Sie es erhalten.

Aber ... Sie können dem Attribut <IMG> src kein Binärbild zuweisen. Sie sollten die URL einfach an das Bild zurückgeben und diese stattdessen zuweisen. Nun, um ehrlich zu sein, gibt es einige Codierungen, um Bilder in den SRC einzubetten, aber sie sind nicht browserübergreifend, also sollten Sie sich von ihnen fernhalten .

Answer 2

Was Sie tun können, wenn Sie versuchen, ein Bild on the fly zu generieren, ist es einfach tun:

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

dann können Sie die Daten mit dem entsprechenden MIME-Typ senden.

Wenn Sie wirklich ein Bild senden möchten, dann sollten Sie sich vielleicht das HTML5-Canvas-Tag ansehen, aber ich bin mir nicht sicher, wie Excanvas damit arbeiten würden, plattformübergreifend.

Sie könnten auf die Leinwand schreiben, aber es wäre effizienter, einfach das IMG-Tag zu verwenden.

Answer 3

Es ist möglicherweise Stream Binärdaten nicht möglich, aber Sie können Ajax verwenden, um Binärdaten abzurufen.

Dies ist möglich mit einer von zwei Methoden: Javascript Typed Arrays oder eine XMLHttpResponse overrideMimeType Hack. Haben Sie ein Lesen eines guten Artikel auf MDN - diese Beispiele von dort genommen: Sending and Receiving Binary Data

Die typisierten Array-Methode wie folgt aussieht:

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

typisierten Arrays werden nicht in IE unterstützt < 10, Firefox < 4 , Chrome < 7, Safari < 5.1 und Opera < 11.6 und mobile support is shaky but improving.

Die zweite Methode verwendet eine XMLHttpRequest-Methode namens overrideMimeType, damit die Binärdaten unverändert weitergegeben werden können.

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; 

Sie erhalten eine unparsed Binärkette, auf dem Sie var byte = filestream.charCodeAt(x) & 0xff; verwenden können, ein bestimmtes Byte abzurufen.

Answer 4

Dies ist eine Erweiterung von Tom Ashworths Antwort (die mir geholfen hat, mich auf dem richtigen Weg mit dem Problem zu machen, mit dem ich konfrontiert war). Dies ermöglicht es Ihnen, nur den Filestream (FileStreamResult, wenn Sie asp.net mvc verwenden) und setzen Sie es auf die img src, was cool ist.

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

Die Grundidee ist, dass die Daten mit untampered zurückgeführt werden, wird es in einem Blob platziert und dann wird eine URL auf das Objekt im Speicher erzeugt. Siehe here und here. Beachten Sie die unterstützten Browser.