Comment faire pour afficher l'image de Uint8Array dans angularjs

Question

J'essaie d'afficher l'image à partir de Amazon S3 Bucket en utilisant Angular JS.

Mon Amazon S3 CORS Configuration sont les suivantes: -

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedMethod>POST</AllowedMethod> 
    <AllowedMethod>PUT</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
</CORSRule> 
</CORSConfiguration> 

HTML Tag

<img ng-src="{{imgSrc}}"> 

Code angulaire JS pour récupérer l'image est la suivante: -

$scope.retrieveImage = function() 
    { 
     AWS.config.update({ 
       accessKeyId: "MyAccessKey", secretAccessKey: "MySecretKey" 
      }); 

     var bucket = new AWS.S3({ params: { Bucket: "MyBucket" } }); 

     bucket.getObject({ Key: 'Datetime.png' }, function (err, file) { 
     $scope.imgSrc= ""; 
     }); 
    } 

Le fichier Le paramètre .Body à l'intérieur de la méthode getObject() vient comme Uint8Array.

S'il vous plaît aidez-moi à ce sujet: -

1. Est-ce le codage standard pour récupérer l'image d'Amazon S3 lors à l'aide angulaire JS? Est-ce que file.Body vient toujours comme Uint8Array
2. Comment convertir un objet Uint8Array en image et afficher à l'intérieur de la page Web ? S'il vous plaît noter que l'image peut être téléchargée de tout format comme JPEG/PNG/GIF, etc.

Il sera vraiment aider si quelqu'un peut fournir des exemples de travail.

Answer 1

Essayez comme ceci:

$scope.retrieveImage = function() { 
    var mypath = "https://mybucket.s3.amazonaws.com/Datetime.png"; 
    mypath = mypath.substr(1); 
    AWS.config.update({ 
     accessKeyId: "MyAccessKey", 
     secretAccessKey: "MySecretKey" 
    }); 
    var bucketInstance = new AWS.S3(); 
    var params = { 
     Bucket: "MyBucket", 
     Key: mypath 
    } 
    bucketInstance.getObject(params, function(err, data) { 
     if (data) { 
      $scope.imgSrc= "data:image/jpeg;base64," + encode(data.Body); 
     } else { 
      console.log('error::', err); 
     } 
    }); 
}