Angular에서 이진 데이터를 읽는 방법ArrayBuffer의 JS?
각진 상태데이터를 동적으로 가져오기 위한 JS가 있습니다.안타깝게도 공식 문서에서는 이진수 데이터(예: 영상 조작)를 읽는 방법을 이해하기 어렵습니다.
디폴트get데이터를 로서 취득하다String(플랭커로 확인).이것은 매우 번거롭다.그러면 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: XMLHttpRequestheader, pre-flighted 요구를 강제적으로 실행한다.즉, 브라우저는 http를 송신한다.OPTIONS에 의뢰하다GET이것은 서버에서는 지원되지 않을 수 있습니다(이 예에서는 서버가 를 반환하고 있습니다).403 HTTP method not allowed).
이 헤더는 6개월 전에 삭제되었습니다.AngularJS 1.1.1켜짐) 및 리셋은 더 이상 필요하지 않습니다(Angular에 대한 이 답변에 감사함).JS는 크로스 오리진리소스에 OPTIONS HTTP 요구를 실행합니다).
다행히 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: 원래 질문의 주를 참조하십시오.
언급URL : https://stackoverflow.com/questions/16791295/how-to-read-binary-data-in-angularjs-in-an-arraybuffer
'codememo' 카테고리의 다른 글
| Woocommerce 3+에서 라인 항목을 사용하여 프로그래밍 방식으로 주문 작성 (0) | 2023.02.16 |
|---|---|
| URL 패턴에 따라 스프링 부트필터를 적용하는 방법 (0) | 2023.02.16 |
| Angular JS를 사용한 모바일 애플리케이션 (0) | 2023.02.16 |
| 앵귤러 블루버드는 어떻게 사용하나요? (0) | 2023.02.16 |
| spring boot war(tomcat 포함 안 함) (0) | 2023.02.16 |