Jak zwrócić obraz z $ http.get w angularjs

Question

W moim kontroler nazywam usługę, która zwraca obietnicę

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

W mojej służbie nawiązywać połączenia, aby uzyskać obraz przekazując link bezpośrednio do obrazka się do:

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

Wszystkie rozmowy udaje i response.data wydaje się trzymając w obrazie wewnątrz:

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




��C  

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

, chociaż nie jestem pewien, czy tak, ponieważ mam problem z wyświetlaniem go. Próbowałem (wewnątrz index.html)

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

Pomysły? Czy można zwrócić rzeczywisty obraz z $ http.get i przekonwertować jego odpowiedź z powrotem na obraz (jpeg itp.)

Dzięki!

Answer 1

Obraz, który powraca, jest w wersji binary encoding, a nie w wersji Base64.

Zrozumiałe, że tagi nie wspierają pozyskiwania z binarnego poprzez atrybuty, więc będziesz musiał spojrzeć na inne rozwiązanie.

Możesz spróbować przekonwertować kodowanie binarne na Base64 po stronie klienta, używając TypedArrays wraz z funkcją btoa. Wtedy można użyć

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

This guide uboczny Mozilla obejmuje złożenie wniosku XHR na obraz i czytania i go bezpośrednio do UInt8Array. To powinno być dobre miejsce wyjściowe.

Jest napisany dla zwykłego starego Javascript, ale przetłumaczenie go na Angular powinno być dobrym ćwiczeniem, jeśli dopiero się uczysz lin.

Answer 2

Na wszelki wypadek, gdy ktoś tego potrzebuje.

W moim przypadku musiałem wysłać wniosek za pośrednictwem usługi kątowej $http, z powodu różnych transformatorów i innych fantazyjnych rzeczy, które z nią robimy.

Więc na podstawie Mozilla's guide wspomniano wcześniej, wymyśliłem następujące rozwiązanie:

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

Podstawowym założeniem jest, aby ustawić właściwość responseType bazowego życzenie użyciem nagłówków XHR i przekonwertować binarny treści do adresu danych .

Answer 3

Żadna z metod wydaje się być kompletny, to kompletne rozwiązanie:

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

Wtedy jestem w stanie użyć go bezpośrednio:

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

funkcji do konwertowania arraybuffer w base64 pochodzi bezpośrednio z ArrayBuffer to base64 encoded string