如何在 ArrayBuffer 中读取 AngularJS 中的二进制数据？答案

【问题标题】：How to read binary data in AngularJS in an ArrayBuffer?如何在 ArrayBuffer 中读取 AngularJS 中的二进制数据？
【发布时间】：2013-05-28 11:48:35
【问题描述】：

在 AngularJS 中有 $http.get 来动态获取数据。不幸的是，从官方文档中很难理解如何读取二进制数据（例如，用于图像处理）。

默认的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，即浏览器在GET 之前发送http OPTIONS 请求。服务器可能不支持此功能（如本例中，服务器返回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）。

【问题讨论】：

标签： angularjs

【解决方案1】：

幸运的是，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： 参见原始问题中的注。

【讨论】：

这很简单！非常感谢。
这在 Angular 1.2 中有效吗？我尝试（在 Chrome 中）并得到一个字符串而不是 ArrayBuffer
我希望我能在花这么多时间思考如何处理从 CDN 获得的数据之前找到这个 ..
旧，但能胜任。谢谢。
救命！在 Angular 2+ 中，它应该是 { responseType: ResponseContentType.ArrayBuffer}