Подтвердить что ты не робот

Как читать двоичные данные в AngularJS в ArrayBuffer?

В AngularJS существует функция $http.get для динамического извлечения данных. К сожалению, из официального документа непросто понять, как читать двоичные данные (например, для манипуляций с изображениями).

По умолчанию get извлекает данные как String (видеть это в plunker). Это очень громоздко. Итак, как получить его в ArrayBuffer? (Обратите внимание, что поскольку XHR2 это уже возможно.

<!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: Если образ для извлечения принадлежит другому домену, может потребоваться перезагрузка заголовков для выполнения простой запрос на межсайтовый сайт: по умолчанию AngularJS 1.0.6 устанавливает заголовок X-Requested-With: XMLHttpRequest, вызывая предпроданный запрос, то есть браузер отправляет запрос http OPTIONS перед get. Это может не поддерживаться сервером (например, в этом примере, когда сервер возвращает 403 HTTP method not allowed).
Этот заголовок был удален шесть месяцев назад, хотя ( то есть от AngularJS 1.1.1 on), а reset больше не требуется (спасибо, кстати, этот ответ AngularJS выполняет HTTP-запрос OPTIONS для кросс-исходного ресурса).

4b9b3361

Ответ 1

К счастью, Vojta Jina уже реализовала эту функцию в ветвь 1.1. Следующий код (см. Его в плунжере) извлекает двоичные данные в 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: см. примечания в исходном вопросе.