Wie lese ich Binärdaten in AngularJS in einem ArrayBuffer?

In AngularJS gibt es die $http.get zum dynamischen Abrufen von Daten. Leider ist aus dem offiziellen Dokument nicht leicht zu verstehen, wie man Binärdaten liest (zB zur Bildbearbeitung).Wie lese ich Binärdaten in AngularJS in einem ArrayBuffer?

Der Standardwert get ruft die Daten als String (see it in a plunker) ab. Dies ist very cumbersome. Also, wie bekommt man es in einem ArrayBuffer? (Beachten Sie, dass seit XHR2 diese already possible ist.)

<!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>

Anmerkung 1: Die Größe der ursprünglichen Datei 473,831 Byte.
Anmerkung 2: Wenn das Bild zu einer anderen Domäne zu holen gehört, Zurücksetzen Header notwendig sein, könnte ein simple cross-site request auszuführen: In der Standardeinstellung AngularJS 1.0.6 die X-Requested-With: XMLHttpRequest Header setzt, zwingt eine preflighted request, das heißt, sendet der Browser eine HTTP-OPTIONS Anfrage vor der GET. Dies könnte vom Server nicht unterstützt werden (wie in diesem Beispiel, wo der Server eine 403 HTTP method not allowed zurückgibt).
This header was removed vor sechs Monaten, (also von AngularJS 1.1.1 an), und der Reset ist nicht mehr nötig (danke an den Weg zu this answer to AngularJS performs an OPTIONS HTTP request for a cross-origin resource).

Quelle

2013-05-28 Alberto

Glücklicherweise hat Vojta Jina bereits this feature in branch 1.1 implementiert. Der folgende Code (see it in a plunker) ruft die Binärdaten in einem ArrayBuffer ab. Beachten Sie die Verwendung der (wie heute) noch instabil 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>

Anmerkung 1 und Anmerkung 2: Noten in der ursprünglichen Frage zu sehen.

Quelle

2013-05-28 11:48:35 Alberto

Das war einfach! Vielen Dank. – gustavohenke

Funktioniert das in Angular 1.2? Ich versuche (in Chrome) und eine Zeichenfolge anstelle der ArrayBuffer – Guard

Ich wünschte, ich hätte dies gefunden, bevor so viel Zeit zu fragen, wie man mit den Daten aus CDN .. –

Wie lese ich Binärdaten in AngularJS in einem ArrayBuffer?

Antwort

Verwandte Themen