如何在 ArrayBuffer 中读取 AngularJS 中的二进制数据? [英] How to read binary data in AngularJS in an ArrayBuffer?
问题描述
在 AngularJS 中有 $http.get 动态获取数据.不幸的是，从官方文档中很难理解如何读取二进制数据(例如，用于图像处理).
默认 get 将数据作为 String 获取(在 plunker 中查看).这是非常麻烦.那么，如何在 ArrayBuffer 中获取它?(请注意，由于 XHR2 这是 已经有可能.)
<头><title>使用 $http.get 读取二进制数据</title><body ng-app><h1>$http 加载二进制数据</h1><div ng-controller="FetchCtrl" ><button ng-click="fetch()">fetch</button><br/>{{信息}}<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script><脚本>//控制器函数 FetchCtrl($scope, $http) {//见注释 1$scope.URL = "http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png";$scope.info = "点击'获取'来获取图片";$scope.fetch = function() {删除 $http.defaults.headers.common['X-Requested-With'];//见注 2$http.get($scope.URL).成功(功能(数据){$scope.info = "Read '" + $scope.URL + "' with " + data.length+ " '" 类型变量中的字符 + typeof(data) + "'";}).错误(函数(数据，状态){$scope.info = "请求失败，状态:" + status;});};}</html>
注1:原始文件大小为473.831字节.
注意 2:如果要获取的图像属于不同的域，则可能需要重置标题才能执行 简单跨站请求:AngularJS 1.0.6默认设置X-Requested-With: XMLHttpRequest 标头，强制预检请求，即浏览器在GET之前发送一个httpOPTIONS请求.这可能不被服务器支持(就像在这个例子中，服务器返回一个 403 HTTP method not allowed).
这个标头在六个月前被删除(即从 AngularJS 1.1.1 开始)，并且不再需要重置(顺便感谢 这个对 AngularJS 的回答为跨域资源执行 OPTIONS HTTP 请求).
幸运的是，Vojta Jina 已经实现了 中接受 xhr2 的 responseType 属性">此功能分支 1.1.以下代码(在 plunker 中查看) 获取 ArrayBuffer 中的二进制数据.注意使用(就今天而言)仍然不稳定的 AngularJS 1.1.5:
<头><title>使用 $http.get 读取二进制数据</title><body ng-app><h1>使用 $http.get 读取二进制数据</h1><div ng-controller="FetchCtrl" ><button ng-click="fetch()">fetch</button><br/>{{信息}}<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script><脚本>//控制器函数 FetchCtrl($scope, $http) {//见注释 1$scope.URL = "http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png";$scope.info = "点击'获取'来获取图片";$scope.fetch = function() {删除 $http.defaults.headers.common['X-Requested-With'];//见注 2$http.get($scope.URL, {responseType: "arraybuffer"}).成功(功能(数据){$scope.info = "Read '" + $scope.URL + "' with " + data.byteLength+ " '" 类型变量中的字节 + typeof(data) + "'";}).错误(功能(数据，状态){$scope.info = "请求失败，状态:" + status;});};}</html>
注释 1 和注释 2:请参阅原始问题中的注释.
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).
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>
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).
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>
Note 1 and note 2: see notes in the original question.
这篇关于如何在 ArrayBuffer 中读取 AngularJS 中的二进制数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
