ekran görüntüleri getirildi s3

Resimleri s3'ten almak ve HTML sayfamda görüntülemek istiyorum.ekran görüntüleri getirildi s3

Eğik HTML dosyası:

<section data-ng-controller="myCtrl"> 
    <img ng-src="{{src}}" width="200px" height="200px"> 
</section>

Eğik Kontrolör dosyası:

var reader = new FileReader(); 
reader.onload = function(event) { 
    $scope.src = event.target.result; 
} 
reader.readAsDataURL(file);

Ama hata gösterir: Bir şey çağrısı FileReader bulundu ve bunu denedik

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 

    }); 
}]);

:
Yakalanmamış TypeError: 'FileReader'da' readAsDataURL 'yürütülemedi: parametre 1' Blob 'türünde değil. Ben s3 ilgilendirmiyor
:

img etiketi
Benim S3 kova görüntü dosyasını görüntülemek için koduyla bana yardım edin

DÜZENLEME herkese açık değil. ne ben bilmek istiyorum senin S3 dosya herkese açıksa
nasıl (HTML resim etiketini

kaynak

2015-09-21 Gaurav Gupta

Kepçeinizin neden halka açık erişim sağlayamadığını sorabilir miyim? Bunu yapmazsanız, bir anahtar aracılığıyla kepçeye erişmeniz gerekir ve kodunuza bir anahtar koyarsanız, kepçeniz temel olarak çok açıktır. – enpenax

@enpenax aslında benim soru html resim etiketi –

kullanarak dosya nesnesinin forma javascript kodu var bir resmi görüntülemek için şimdi çalışıyor nasıl? –

Görüntülenecek görüntüleri "getirmiyorsunuz". Görüntü URL'sini yalnızca bulundukları konuma yönlendirin (sizin durumunuzda S3). Bu nedenle, tekil nesneyi çekmek yerine, o kovadaki (bucket.listObjects) dosya listesini çekin ve ardından küçük resimlerin/resimlerin kaynağına ekleyin.

<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; 
    } 
    });

dosya izni okuduğunuzu burada varsayarsak. Açık nedenlerle kamuya açık okuma izni olmadan erişilemezler.

DÜZENLEME: Yoruma dayanarak, soru gerçek görüntüyü sayfaya yüklemeyi amaçlamaktadır. İşte bunu nasıl: sen S3 aldığım

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'); 
}

veri bayt dizidir. Bunu base64encoded veri URI'sine dönüştürmeniz gerekir. Kodlama işlevi here'dan ödünç alınmıştır. İşte kimlik bilgileri kaldırılmış bir jsFiddle çalışanı.

kaynak

2015-10-10 05:20:27

için JavaScript sdk kullanıyorum tarayıcılar için JavaScript SDK'yı kullanmalıdır img etiketini kullanarak javascript kodunuzdaki görüntüyü img etiketini kullanarak –

Gereksinimlerinizi karşılamak için cevabı güncelledim. –

kromda yetersiz kaynak sorunuyla karşılaştınız mı? Bir sürü resmi önceden yüklüyorum ve bu çalışmayı görmüyorum. – Tisha

kullanarak bir dosya nesnesi (s3 obj) şeklinde sizin javascript kodu var bir resmi görüntülemek için olmasıdır Eğer bu şemadan url alabilirsiniz) genel değil varsayılan olarak, bunu değiştirmek zorunda:

: bölge eu-batı-1 böyle bir şey ile olduğunu

https://s3-<region>.amazonaws.com/<bucket-name>/<key>

Yani eğer

$scope.src = 'https://s3-eu-west-1.amazonaws.com/mybucket/myimage.jpg';

kaynak

2015-09-21 19:09:44

ile ilgili bir sorunum var. Kovanın herkese açık olamayacağı ... bir fikrin var mı? –

Yani aslında benim sorum bir görüntülemek için nasıl http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-intro.html –

de zaten tarayıcılar –

S3'de saklanan görüntünün URL'sini belirtmeniz yeterlidir.

Çalışması gerekir.

kaynak

2015-10-15 19:21:12 Siddhu

plz soruyu dikkatli bir şekilde okuyun –

S3'ten sözle görüntü elde etmenin tam uygulanması - keyfini çıkarın!

<!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>

kaynak

2018-01-10 15:24:32

ekran görüntüleri getirildi s3

cevap

İlgili konular