Jak odczytywać dane binarne w AngularJS w ArrayBuffer?

W AngularJS jest $http.get do dynamicznego pobierania danych. Niestety, z oficjalnego dokumentu nie jest łatwo zrozumieć, jak odczytywać dane binarne (na przykład w celu manipulowania obrazem).Jak odczytywać dane binarne w AngularJS w ArrayBuffer?

Domyślnie get pobiera dane jako String (see it in a plunker). To jest very cumbersome. Jak go zdobyć w ArrayBuffer? (Zauważ, że ponieważ XHR2 to already possible.)

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Using $http.get to read binary data</title> 
    </head> 
    <body ng-app> 
    <h1>$http to load binary data</h1> 
    <div ng-controller="FetchCtrl" > 
     <button ng-click="fetch()">fetch</button><br/> 
     {{info}} 
    </div> 
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script> 
    <script> 
    // Controller 
    function FetchCtrl($scope, $http) { 
     // See note 1 
     $scope.URL = "http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"; 
     $scope.info = "Click 'fetch' to fetch an image" ; 

     $scope.fetch = function() { 
     delete $http.defaults.headers.common['X-Requested-With']; // See note 2 
     $http.get($scope.URL). 
      success(function(data) { 
      $scope.info = "Read '" + $scope.URL + "' with " + data.length 
      + " chars in a variable of type '" + typeof(data) + "'"; 
      }).error(function(data, status) { 
      $scope.info = "Request failed with status: " + status; 
      }); 
     }; 
    }  
    </script> 
    </body> 
</html>

Uwaga 1: Rozmiar oryginalnego pliku jest 473.831 bajtów.
Uwaga 2: Jeśli obraz sprowadzić należy do innej domeny, nagłówki resetowanie może być konieczne wykonanie simple cross-site request: domyślnie AngularJS 1.0.6 ustawia nagłówek X-Requested-With: XMLHttpRequest, zmuszając preflighted request, to znaczy, że przeglądarka wysyła http OPTIONS wniosek przed GET. Może to nie być obsługiwane przez serwer (tak jak w tym przykładzie, gdy serwer zwraca wartość 403 HTTP method not allowed).
This header was removed sześć miesięcy temu, (czyli od AngularJS 1.1.1 na), a resetowanie nie jest już konieczne (dzięki przy okazji do this answer to AngularJS performs an OPTIONS HTTP request for a cross-origin resource).

Źródło

2013-05-28 Alberto

Na szczęście Vojta Jina wdrożył już this feature w branch 1.1. Poniższy kod (see it in a plunker) pobiera dane binarne w postaci ArrayBuffer. Zwróć uwagę na użycie (jak dzisiaj) wciąż niestabilną AngularJS 1.1.5:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Using $http.get to read binary data</title> 
    </head> 
    <body ng-app> 
    <h1>Using $http.get to read binary data</h1> 
    <div ng-controller="FetchCtrl" > 
     <button ng-click="fetch()">fetch</button><br/> 
     {{info}} 
    </div> 
    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script> 
    <script> 
    // Controller 
    function FetchCtrl($scope, $http) { 
     // See note 1 
     $scope.URL = "http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"; 
     $scope.info = "Click 'fetch' to fetch an image" ; 
     $scope.fetch = function() { 
     delete $http.defaults.headers.common['X-Requested-With']; // See note 2 
     $http.get($scope.URL, {responseType: "arraybuffer"}). 
      success(function(data) { 
      $scope.info = "Read '" + $scope.URL + "' with " + data.byteLength 
      + " bytes in a variable of type '" + typeof(data) + "'"; 
      }). 
      error(function(data, status) { 
      $scope.info = "Request failed with status: " + status; 
      }); 
     }; 
    }  
    </script> 
    </body> 
</html>

uwaga 1 i uwaga 2: patrz uwagi w oryginalnym pytanie.

Źródło

2013-05-28 11:48:35 Alberto

To było łatwe! Dziękuję bardzo. – gustavohenke

Czy to działa w Angular 1.2? Próbuję (w Chrome) i otrzymuję ciąg znaków zamiast ArrayBuffer – Guard

Żałuję, że nie znalazłem tego przed spędzeniem tak wiele czasu zastanawiając się, jak sobie poradzić z danymi uzyskanymi z CDN .. –

Jak odczytywać dane binarne w AngularJS w ArrayBuffer?

Odpowiedz

Powiązane problemy