visualizza immagini recuperate da s3

Voglio recuperare le immagini da s3 e visualizzarle sulla mia pagina HTML.visualizza immagini recuperate da s3

angolare file HTML:

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

file di controller angolare:

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 

    }); 
}]);

ho trovato qualcosa chiamata FileReader ed ho provato questo:

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

ma dimostra di errore:
Uncaught TypeError: impossibile eseguire "readAsDataURL" su "FileReader": il parametro 1 non è di tipo "Blob".

Please help me con il codice per visualizzare file di immagine nel tag img
mio S3 secchio non è pubblico

EDIT:
io non sono interessato a S3. quello che voglio sapere è che
Come visualizzare un'immagine che avete nel vostro codice javascript nella forma di un oggetto file (obj s3) utilizzando il tag di immagine HTML

fonte

2015-09-21 Gaurav Gupta

Posso chiedere perché il bucket non può avere accesso di lettura pubblico? Se non lo fai, devi accedere al bucket tramite una chiave e se inserisci una chiave nel tuo codice, il tuo bucket è fondamentalmente molto pubblico. – enpenax

@enpenax in realtà la mia domanda è come visualizzare un'immagine che hai nel codice javascript sotto forma di oggetto file usando il tag immagine html –

funziona adesso? ho qualche problema –

Non si "scaricano" le immagini da visualizzare. Devi solo puntare l'URL dell'immagine alla posizione in cui sono memorizzati (S3 nel tuo caso). Quindi, invece di estrarre singoli oggetti, estrarre l'elenco di file in quel bucket (bucket.listObjects) e quindi aggiungerli all'origine delle miniature/immagini.

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

Supponendo qui che i file sono permesso di lettura. Non saranno accessibili senza autorizzazione di lettura pubblica per ovvi motivi.

MODIFICA: In base al commento, la domanda è cercare di caricare l'immagine effettiva nella pagina. Ecco come fare:

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

I dati si ottiene dal S3 è array di byte. Devi convertirlo nell'URI dei dati con codifica base64. La funzione di codifica è presa in prestito da here. Ecco uno che funziona jsFiddle con le credenziali rimosse.

fonte

2015-10-10 05:20:27

in realtà la mia domanda è come mostrare un immagine che hai nel tuo codice javascript sotto forma di oggetto file usando il tag img –

Ho aggiornato la risposta per soddisfare i tuoi requisiti. –

hai riscontrato problemi di risorse insufficienti in Chrome? Sto pre-caricando un mucchio di immagini e non vedo che funzioni. – Tisha

Se il file S3 è pubblico (bisogna cambiarlo, per impostazione predefinita non è pubblico) è possibile ottenere l'url da questo schema:

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

Quindi, se la regione è eu-ovest-1 con qualcosa di simile:

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

fonte

2015-09-21 19:09:44

il mio secchio non può essere pubblico ... qualche idea allora? –

Quindi dovresti usare l'SDK JavaScript per i browser http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-intro.html –

beh sto già usando javascript sdk per i browser –

Devi solo menzionare l'url dell'immagine che è memorizzata in s3.

https://mybucket.s3.amazonaws.com/myimage.jpg

Questo dovrebbe funzionare.

fonte

2015-10-15 19:21:12 Siddhu

plz leggere attentamente la domanda –

Implementazione completa di ottenere un'immagine da s3 con promessa - buon divertimento!

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

fonte

2018-01-10 15:24:32

visualizza immagini recuperate da s3

risposta

Problemi correlati