在AngularJS中,有$http.get动态获取数据.遗憾的是,从官方文档中不易理解如何读取二进制数据(例如,用于图像处理).
默认值get将数据提取为a 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标头,强制执行预检请求,即浏览器OPTIONS在之前发送http 请求这个GET.服务器可能不支持这种情况(例如,在此示例中,服务器返回a 403 HTTP method not allowed).
这个标题在六个月前被删除了(也就是说,从AngularJS 1.1.1开启),并且不再需要重置(感谢AngularJS的这个答案的方式为跨源资源执行OPTIONS HTTP请求).
Alb*_*rto 51
幸运的是,Vojta Jina已经在分支1.1中实现了这一功能.以下代码(在plunker中查看)获取二进制数据.注意使用(至于今天)仍然不稳定:ArrayBufferAngularJS 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:请参阅原始问题中的注释.
| 归档时间： |
|
| 查看次数： |
40588 次 |
| 最近记录： |