Wie die Anzeige empfangene Bild als byte-array in Angular JS

Ich habe eine server-seitige Anwendung, dass wird wieder ein Bild. Dies sind die Antwort-Header:

Content-Disposition: attachment; filename=8822a009-944e-43f4-999b-d297198d302a;1.0_low-res
Content-Length: 502343
Content-Type: image/png
Date: Mon, 03 Aug 2015 19:13:39 GMT
Server: Apache-Coyote/1.1

In Winkel, die ich brauche, um das Bild anzuzeigen. Wenn immer das Bild, ich benutze die angularJS $http für den server aufrufen, und das Ergebnis im Rahmen, aber ich nie erreichen, den Erfolg Funktion $http. Die Ausführung dieser Aufruf vom Briefträger gibt das Bild normalerweise. Ich bin neugierig, wie man Eckige, um das Bild anzuzeigen.

Dies ist, wie ich das Bild angezeigt:

<img ng-src={{image}} />

Hier ist der Aufruf, um das image vom server:

$http.get(url, {responseType: "arraybuffer"})
    .success(function(data) {
        $scope.image= data;
    }
)
  • Können Sie nach dem $http-Aufruf an den server?
  • Jup, hier ist Sie: ` $http.get(url, {responseType: "arraybuffer"} ). success(function(data) { $scope.Bild= data; }) `
InformationsquelleAutor Loshmeey | 2015-08-03
  1. 10

    Ich Stimme mit Bellu ' s Antwort, dass Sie sollten mit den .then - Funktion, anstatt die .success Funktion auf das Versprechen zurück von der $http.get. Aber ich könnte mir vorstellen, dass Sie noch immer ein Problem mit Ihrer ng-src Referenz, Sie sind nicht gemacht, es mit einem URL, aber anstatt eine Referenz zu Ihrem byte-array.

    Binden ng-src Referenz auf ein byte-array im Speicher gehalten auf dem client, Ihre Bindung sollte folgende form:

    <img ng-src="data:image/JPEG;base64,{{image}}">

    Bearbeiten

    Da ich nie erwähnt es explizit, die ng-src Bindung oben wird davon ausgegangen, dass Ihre Bild-Daten werden im base64-format. HarrisonA sofern eine Methode unten, um zu konvertieren das array, wenn Sie nicht bereits im base64-format.

    • Danke Jungs für die Antworten, ich habe Fortschritte gemacht mit dem code Bellu gepostet, ich bin einfach nur zu kämpfen mit der Anzeige des Bildes. Debuggen Sie den code, ich habe das Bild in die Antwort mit einer bestimmten Größe, aber das Bild ist immer noch nicht in der Benutzeroberfläche angezeigt. Bin ich etwas fehlt?
    • Es herausgefunden. Wir hatten zu Kodieren, arrayBuffer in der base64-string. Alles gut jetzt 🙂 Danke Euch für die Antworten!
    • Nur kommt zurück, um diese von gestern. Froh, dass Sie es geschafft habe! Für was es Wert ist, base64 ist wohl nicht das einzige format, das funktioniert, es ist nur das bekannteste Beispiel. Lesen Sie weiter auf Formate für Daten-URI-Schema hier: en.wikipedia.org/wiki/Data_URI_scheme#Format
    • Tun wird! Vielen Dank für die Hilfe!
    • Wie kann ich die gleiche Sache in der option wählen Sie mit angular js?
    • Wird das funktionieren wenn ich Bild vom Typ .png?

    InformationsquelleAutor jdmcnair
  2. 7

    Wollte nur hinzufügen, um jdmcnair Antwort und Loshmeey Kommentar:

    Unten ist ein link zu der Funktion, die ich verwendet, um zu konvertieren das array buffer in einer base-64-Zeichenfolge.

    ArrayBuffer-zu base64-codierte string

    Funktion:

    function _arrayBufferToBase64( buffer ) {
  var binary = '';
  var bytes = new Uint8Array( buffer );
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode( bytes[ i ] );
  }
  return window.btoa( binary );
}

    Habe ich diese Funktion in meinem Winkel-controller und dann an das Ergebnis (verwendet ein $scope-variable), um die img-element in meine html-Datei.

    • +1, Weil die ursprüngliche Frage sich auf ein byte-array und nicht noch die eine Base64-codierte Zeichenfolge. Das snippet war das fehlende bit zu stecken Sie es alle zusammen.
    InformationsquelleAutor HarrisonA
  3. 2
    • Ich denke, dass Sie verwenden sollten, dann Rückruf in das eckige
      Dokumentation Sie sagen, dass die Erfolg Rückruf wurde
      veraltet.
    • Ihre img ist in der Daten Antwort-Eigenschaft.

    Nach diesen überlegungen, könnten Sie versuchen, so etwas wie dieses.

    $http.get(url, {responseType: "arraybuffer"} ).then(function(response) { 
$scope.image= response.data; });
    InformationsquelleAutor Bellu
Schreibe einen Kommentar