如何在一个ArrayBuffer AngularJS读取二进制数据？ [英] How to read binary data in AngularJS in an ArrayBuffer?
问题描述
在AngularJS还有就是 $ http.get 来动态地获取数据。不幸的是，从官方文档是不容易理解如何读取的二进制数据（例如，用于图像处理）。
In AngularJS there is the $http.get to dynamically fetch data. Unfortunately, from the official doc is not easy to understand how to read binary data (for example, for image manipulation).
默认 GET 获取数据为字符串（看到它在plunker ）。这是非常麻烦。那么，怎样才能得到它在<a href=\"https://developer.mozilla.org/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer\"> ArrayBuffer ？ （请注意，由于XHR2这是<一个href=\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt$p$pquest/Sending_and_Receiving_Binary_Data\">already可能。）
The default get fetches the data as a String (see it in a plunker). This is very cumbersome. So, how to get it in an ArrayBuffer? (Note that since XHR2 this is 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：如果获取图像属于不同的领域，重置头可能需要执行的简单的跨站点请求：在默认情况下， AngularJS 1.0.6 设置 X-要求，随着：XMLHtt prequest 头，迫使<一个href=\"https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#$p$pflighted_requests\">$p$pflighted申请，也就是浏览器发送前的 GET 一个HTTP 选项请求。这可以被服务器不支持（如在本实施例中，其中，服务器返回不允许一个 403 HTTP方法）。结果
此头球攻门被6个月拆除前，虽然，（即从 AngularJS 1.1 .1 ），并复位是没有必要的了（顺便感谢这个答案到的 AngularJS进行了跨源资源的OPTIONS HTTP请求的）。
Note 1: The size of the original file is 473.831 bytes.
Note 2: If the image to fetch belongs to a different domain, resetting headers could be necessary to perform a simple cross-site request: By default, AngularJS 1.0.6 sets the X-Requested-With: XMLHttpRequest header, forcing a preflighted request, that is, the browser sends an http OPTIONS request before the GET. This could be not supported by the server (like in this example, where the server returns a 403 HTTP method not allowed).
This header was removed six months ago though, (that is, from AngularJS 1.1.1 on), and the reset is not necessary anymore (thanks by the way to this answer to AngularJS performs an OPTIONS HTTP request for a cross-origin resource).
推荐答案
幸运的是， Vojta开发集纳已经实施的中的 =https://github.com/angular/angular.js/提交/ e0a54f6b206dc2b6595f2bc3a17c5932e7477545>枝1.1 。下面code（看到它在一个plunker ）获取在二进制数据 ArrayBuffer 。注意，这里使用的（如今天）仍然不稳定 AngularJS 1.1.5 ：
Fortunately, Vojta Jina has already implemented this feature in branch 1.1. The following code (see it in a plunker) fetches the binary data in an ArrayBuffer. Note the use of the (as for today) still unstable 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：看到在原来的问题笔记
这篇关于如何在一个ArrayBuffer AngularJS读取二进制数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
