angularjs 显示从s3获取的图像

ftf50wuq 于 2023-09-30 发布在 Angular

关注(0)|答案(5)|浏览(117)

我想从s3中获取图像并将其显示在HTML页面上。
Angular HTML文件：

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

Angular Controller文件：

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

但显示错误：

Uncaught TypeError：无法在“FileReader”上执行“readAsDataURL”：参数% 1的类型不是“Blob”。

请帮助我的代码显示图像文件中的img标记

我的S3存储桶不是公共的
编辑：

我对s3不感兴趣。我想知道的是

如何使用HTML image标记以文件对象（s3 obj）的形式显示JavaScript代码中的图像

angularjs

来源：https://stackoverflow.com/questions/32702431/display-images-fetched-from-s3

5条答案

按热度按时间

ozxc1zmp1#

你不“获取”图像显示。您只需将图像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;
    }
  });

这里假设文件具有读取权限。出于显而易见的原因，如果没有公共读取权限，它们将无法访问。

**编辑：**根据评论，问题是寻求在页面上加载实际图像。具体操作方法如下：

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得到的数据是一个字节数组。您需要将其转换为base64 encoded数据URI。encode函数借用自here。下面是一个删除了凭据的工作jsFiddle。

赞(0）回复(0）举报 2023-09-30

pcww981p2#

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

赞(0）回复(0）举报 2023-09-30

zrfyljdw3#

如果你的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）回复(0）举报 2023-09-30

kmb7vmvb4#

尽管尝试了很多东西，我还是得到了：

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId></RequestId>
<HostId></HostId>
</Error>

const params: AWS.S3.PutObjectRequest = {
      Bucket: bucketName,
      Key: fileName,
      Body: fileBuffer,
      ContentType: mimeType,
      ACL: 'public-read', // read to public allowed while uploading.
    };

这对我很有效。任何对此感到困惑的人都可以尝试这种方法。

赞(0）回复(0）举报 2023-09-30

ezykj2lf5#

你只需要提到存储在s3中的图像的url。

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

这个应该能用

赞(0）回复(0）举报 2023-09-30

我来回答

angularjs 显示从s3获取的图像

5条答案

相关问题

热门标签

最新问答