В 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 для кросс-исходного ресурса).