Wie Bild zurück von $ http.get in AngularJS

Question

In meinem Controller ich einen Dienst aufrufen, die ein Versprechen

var onComplete = function(data) { 
       $scope.myImage = data;   
      }; 

In meinem Dienst gibt ich einen Anruf zu tätigen um das Bild zu erhalten, indem URL direkt auf das Bild vorbei selbst: Alle

return $http.get("http://someurl.com/someimagepath") 
     .then(function(response){   
      return response.data; 
     }); 

die Anrufe erfolgreich sind und die response.data erscheint in einem Bild zu halten innen:

����JFIF��;CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 90 
��C 




��C  

����"�� 
���}!1AQa"q2���#B��R��$ 

obwohl ich bin mir nicht sicher, ob es tatsächlich tut, weil ich Probleme es zu Anzeigen mit. Ich habe versucht (inside index.html)

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

Ideen? Ist es möglich, ein tatsächliches Bild von $ http.get zurückzugeben und seine Antwort zurück in Bild zu konvertieren (JPEG, etc.)

Vielen Dank!

Answer 1

Das Bild, das in binary encoding, anstatt Base64 kommt zurück ist.

Verständlicherweise unterstützen Tags nicht das Sourcing von binären Attributen, also müssen Sie sich eine andere Lösung anschauen.

Sie könnten versuchen, die binäre Codierung zu Base64 auf der Clientseite mit TypedArrays zusammen mit der btoa-Funktion zu konvertieren. Dann würden Sie in der Lage sein verwenden

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

This guide eine von Mozilla deckt sie ein XHR Anfrage und Bild und es direkt in eine UInt8Array zu lesen. Es sollte ein guter Startplatz sein.

Es ist für einfache alte Javascript geschrieben, aber wenn Sie lernen, sind die Seile nur eine gute Übung sein sollte, es zu Angular übersetzen.

Answer 2

Für den Fall, muss es jemand.

In meinem Fall musste ich die Anfrage durch Winkels $http Service senden, wegen der verschiedenen Transformatoren und anderer ausgefallener Sachen, die wir damit machen.

So basiert auf den Mozilla's guide bereits erwähnt, kam ich auf die folgende Lösung:

let getImageDataURL = (url, imageType = 'image/jpeg') => { 
    return $http.get(url, {responseType: 'arraybuffer'}).then((res) => { 
    let blob = new Blob([res.data], {type: imageType}); 
    return (window.URL || window.webkitURL).createObjectURL(blob); 
    }); 
}; 

Die Grundidee ist es, die responseType Eigenschaft der zugrunde liegenden XHR Anfrage und die convert des binäre Inhalt Daten URL zu setzen .

Answer 3

Keine der Methoden vollständig zu sein scheint, ist dies eine komplette Lösung:

$http({ 
    method: 'GET', 
    url: imageUrl, 
    responseType: 'arraybuffer' 
    }).then(function(response) { 
    console.log(response); 
    var str = _arrayBufferToBase64(response.data); 
    console.log(str); 
    // str is base64 encoded. 
    }, function(response) { 
    console.error('error in getting static img.'); 
    }); 


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

Dann bin ich in der Lage, es zu benutzen direkt:

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

Die Funktion Arraybuffer in konvertieren base64 ist direkt aus ArrayBuffer to base64 encoded string