web-dev-qa-db-ja.com

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

ただし、エラーが表示されます。
不明なTypeError： 'FileReader'で 'readAsDataURL'の実行に失敗しました：パラメーター1は 'Blob'タイプではありません。

imgタグ内の画像ファイルを表示するコードを手伝ってください
私のS3バケットはパブリックではありません

編集：
s3には興味がありません。私が知りたいのはそれです
HTML画像タグを使用して、javascriptコードにあるファイルオブジェクト（s3 obj）の形式で画像を表示する方法

javascriptangularjsamazon-s3filereaderaws-sdk
29
Gaurav Gupta

表示する画像を「フェッチ」しません。画像のURLを保存する場所（あなたの場合はS3）に向けるだけです。そのため、個々のオブジェクトをプルする代わりに、そのバケット内のファイルのリストをプルします（bucket.listObjects）そして、それらをサムネイル/画像のソースに追加します。

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

ここでは、ファイルに読み取り権限があると仮定します。明らかな理由により、一般の読み取り許可なしではアクセスできません。

EDIT：コメントに基づいて、質問はページ上の実際の画像をロードしようとしています。方法は次のとおりです。

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から取得するデータはバイト配列です。これをbase64encodedデータURIに変換する必要があります。エンコード機能は here から借用しています。資格情報が削除された、1つの jsFiddle が機能しています。

44
show-me-the-code

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

S3に保存されている画像のURLのみを言及する必要があります。

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

これは動作するはずです。

1
Siddhu

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';
0
michelem