ArrayBufferでAngularJSのバイナリデータを読み取る方法は？

AngularJSには、データを動的にフェッチするための$http.getがあります。残念なことに、公式の文書から、バイナリデータの読み方（例えば、画像操作のための方法）を理解することは容易ではありません。ArrayBufferでAngularJSのバイナリデータを読み取る方法は？

デフォルトのgetは、データをString（see it in a plunker）としてフェッチします。これはvery cumbersomeです。だから、ArrayBufferでそれを取得するには？（XHR2ので、これは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>

注1：元のファイルのサイズは473.831バイトです。
注2：フェッチする画像が別のドメインに属している場合は、リセットヘッダがsimple cross-site requestを実行するために必要であり得る：デフォルトでは、AngularJS 1.0.6X-Requested-With: XMLHttpRequestヘッダを設定preflighted requestを強制的に、つまり、ブラウザは、HTTPを送信OPTIONSGETの前にリクエストしてください。これはサーバによってサポートされない可能性があります（この例では、サーバが403 HTTP method not allowedを返します）。
This header was removed（ただし、AngularJS 1.1.1から）、リセットはもう必要ありません（this answer to AngularJS performs an OPTIONS HTTP request for a cross-origin resourceに感謝）。

出典

2013-05-28 Alberto

Vojta Jinaはすでにをbranch 1.1に実装しています。次のコード（see it in a plunker）は、バイナリデータをArrayBufferにフェッチします。まだ不安定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>

は、注1及び注2：は、元の質問にノートを参照してください。

出典

2013-05-28 11:48:35 Alberto

これは簡単でした！どうもありがとう。 – gustavohenke

これは角度1.2で機能しますか？私は（Chromeで）ArrayBufferの代わりに文字列を取得しようとしています – Guard

CDNから取得したデータをどのように処理するのかと思うほど多くの時間を費やす前に、これを見つけたと思います。 –

ArrayBufferでAngularJSのバイナリデータを読み取る方法は？

答えて

関連する問題