web-dev-qa-db-fra.com

afficher les images extraites de s3

Je veux récupérer des images de s3 et les afficher sur ma page HTML.

Fichier HTML angulaire:

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

Fichier du contrôleur angulaire:

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

    });
}]);

J'ai trouvé quelque chose appeler FileReader et j'ai essayé celui-ci:

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

Mais cela montre une erreur:
TypeError non intercepté: échec de l'exécution de 'readAsDataURL' sur 'FileReader': le paramètre 1 n'est pas de type 'Blob'.

Aidez-moi avec le code à afficher le fichier image dans la balise img
Mon compartiment S3 n'est pas public

MODIFIER:
Je ne suis pas intéressé par l'article 3. ce que je veux savoir c'est que
comment afficher une image que vous avez dans votre code javascript sous la forme d'un objet fichier (s3 obj) en utilisant la balise d'image HTML

javascriptangularjsamazon-s3filereaderaws-sdk
29
Gaurav Gupta

Vous ne "récupérez" pas les images à afficher. Vous pointez simplement l'URL de l'image vers l'emplacement où elles sont stockées (S3 dans votre cas). Ainsi, au lieu de tirer un objet individuel, tirez la liste des fichiers dans ce compartiment (bucket.listObjects), puis ajoutez-les à la source des vignettes/images.

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

En supposant ici que les fichiers ont une autorisation de lecture. Ils ne seront pas accessibles sans autorisation de lecture publique pour des raisons évidentes.

EDIT: Sur la base du commentaire, la question cherche à charger l'image réelle sur la page. Voici comment procéder:

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

Les données que vous obtenez du S3 sont un tableau d'octets. Vous devez le convertir en URI de données codées en base64. La fonction d'encodage est empruntée à ici . En voici un qui fonctionne jsFiddle avec les informations d'identification supprimées.

44
show-me-the-code

Mise en œuvre complète de l'obtention d'une image de s3 avec promesse - profitez-en!

<!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>
3
Liad Livnat

Il suffit de mentionner l'url de l'image stockée dans le s3.

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

Cela devrait fonctionner.

1
Siddhu

Si votre fichier S3 est public (vous devez le changer, par défaut il n'est pas public) vous pouvez obtenir l'url de ce schéma:

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

Donc, si la région est eu-west-1 avec quelque chose comme ceci:

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