s3에서 가져온 이미지 표시
s3에서 이미지를 가져와 HTML 페이지에 표시하고 싶다.
각도 HTML 파일:
<section data-ng-controller="myCtrl">
<img ng-src="{{src}}" width="200px" height="200px">
</section>
각도 컨트롤러 파일:
angular.module('users').controller('myCtrl', ['$scope',function($scope) {
var s3 = new AWS.S3();
s3.getObject({Bucket: 'mybucket', Key: 'myimage.jpg'},function(err,file){
//code?? to display this image file in the img tag
//$scope.src=file????....obviously it wont work
});
}]);
FileReader라는 것을 발견하여 다음과 같이 시도했습니다.
var reader = new FileReader();
reader.onload = function(event) {
$scope.src = event.target.result;
}
reader.readAsDataURL(file);
단, 에러가 표시됩니다.
Uncaught TypeError: 'readAsData''FileReader'의 URL: 매개 변수 1이 'Blob' 유형이 아닙니다.
이미지 파일을 img 태그에 표시하는 코드를 알려주세요.
S3 버킷이 공개되지 않음
편집:
나는 s3에 관심이 없다. 내가 알고 싶은 것은 그것이다.
HTML 이미지 태그를 사용하여 javascript 코드에 있는 이미지를 파일 객체(s3 obj) 형식으로 표시하는 방법
표시할 이미지를 "fetch"하지 않습니다.이미지 URL을 저장 위치로 지정하기만 하면 됩니다(이 경우는 S3).따라서 개별 개체를 풀하는 대신 해당 버킷에 있는 파일 목록을 풀합니다.bucket.listObjects> ) ) ails ) ) ) ) ) ) ) ) )의 소스에 추가합니다.
<section data-ng-controller="myCtrl">
<img ng-src="{{s3Url}}{{image.Key}}" width="200px" height="200px" ng-repeat="image in allImageData">
</section>
$scope.s3Url = 'https://s3-<region>.amazonaws.com/myBucket/';
var bucket = new AWS.S3({params: {Bucket: 'myBucket'}});
bucket.listObjects(function (err, data) {
if (err) {
console.log(err);
} else {
console.log(data);
$scope.allImageData = data.Contents;
}
});
여기에서는 파일에 읽기 권한이 있다고 가정합니다.명백한 이유로 공개 읽기 허가 없이는 액세스 할 수 없습니다.
편집: 코멘트에 근거해, 질문은 페이지에 실제의 이미지를 로드하려고 하고 있습니다.방법은 다음과 같습니다.
function myCtrl($scope, $timeout) {
AWS.config.update({
accessKeyId: 'YOUR_ACCESS_TOKEN',
secretAccessKey: 'YOUR_SECRET'
});
AWS.config.region = "YOUR_REGION";
var bucket = new AWS.S3({params: {Bucket: 'YOUR_BUCKET'}});
bucket.getObject({Key: 'happy-face.jpg'}, function(err,file){
$timeout(function(){
$scope.s3url = "data:image/jpeg;base64," + encode(file.Body);
}, 1);
});
}
function encode(data) {
var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },'');
return btoa(str).replace(/.{76}(?=.)/g,'$&\n');
}
S3에서 얻은 데이터는 바이트 배열입니다.이를 base64 인코딩된 데이터 URI로 변환해야 합니다.인코딩 함수는 여기서 차용됩니다.다음은 자격 증명이 제거된 jsFiddle 작업입니다.
s3에서 이미지를 얻을 수 있는 확실한 구현 - 즐기세요!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.179.0.min.js"></script>
</head>
<body>
<img height="200" width="200">
<script>
var mimes = {
'jpeg': 'data:image/jpeg;base64,'
};
AWS.config.update({
signatureVersion: 'v4',
region: 'us-east-1',
accessKeyId: '',
secretAccessKey: ''
});
var bucket = new AWS.S3({params: {Bucket: 'xxx'}});
function encode(data)
{
var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },'');
return btoa(str).replace(/.{76}(?=.)/g,'$&\n');
}
function getUrlByFileName(fileName,mimeType) {
return new Promise(
function (resolve, reject) {
bucket.getObject({Key: fileName}, function (err, file) {
var result = mimeType + encode(file.Body);
resolve(result)
});
}
);
}
function openInNewTab(url) {
var redirectWindow = window.open(url, '_blank');
redirectWindow.location;
}
getUrlByFileName('sprites.png', mimes.jpeg).then(function(data) {
//openInNewTab(data);
document.querySelector('img').src = data;
});
</script>
</body>
</html>
S3 파일이 공용인 경우(기본적으로 공용이 아닌 파일을 변경해야 함) 다음 스키마에서 URL을 가져올 수 있습니다.
https://s3-<region>.amazonaws.com/<bucket-name>/<key>
이 지역이 eu-west-1일 경우 다음과 같습니다.
$scope.src = 'https://s3-eu-west-1.amazonaws.com/mybucket/myimage.jpg';
s3에 저장되어 있는 이미지의 URL만 언급하면 됩니다.
https://mybucket.s3.amazonaws.com/myimage.jpg
이거면 될 거야.
언급URL : https://stackoverflow.com/questions/32702431/display-images-fetched-from-s3
'programing' 카테고리의 다른 글
| ng-배열이 비어 있는지 확인합니다. (0) | 2023.02.21 |
|---|---|
| Material-UI에서 대화상자의 높이를 설정하려면 어떻게 해야 합니까? (0) | 2023.02.21 |
| wp_nav_menu 변경 서브메뉴 클래스 이름? (0) | 2023.02.21 |
| plsql에서 변수가 null인지 확인합니다. (0) | 2023.02.21 |
| POJO를 트리모델에 직접 연재할 수 있는 방법이 있나요? (0) | 2023.02.21 |