如何在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.6設置X-Requested-With: XMLHttpRequest頭，迫使preflighted request，即，瀏覽器發送的HTTP OPTIONS要求在GET之前。這可能不受服務器支持（例如，在此示例中，服務器返回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中執行this feature。以下代碼（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

這是否適用於Angular 1.2？我嘗試（在Chrome中）並獲取一個字符串，而不是ArrayBuffer – Guard

我希望在花費那麼多時間想要如何處理從CDN獲得的數據之前，我會找到這個。.. –

如何在ArrayBuffer中讀取AngularJS中的二進制數據？

回答

相關問題