显示从 s3 获取的图像答案

【问题标题】：display images fetched from s3显示从 s3 获取的图像
【发布时间】：2015-12-18 13:53:26
【问题描述】：

我想从 s3 获取图像并将它们显示在我的 HTML 页面上。

Angular 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 图像标签以文件对象 (s3 obj) 的形式显示您在 javascript 代码中拥有的图像

【问题讨论】：

请问为什么您的存储桶不能有公共读取权限？如果您不这样做，则需要通过密钥访问存储桶，并且如果您将密钥放入代码中，那么您的存储桶基本上是非常公开的。
@enpenax 实际上我的问题是如何使用 html 图像标签以文件对象的形式显示您在 javascript 代码中拥有的图像
现在工作了吗？我有一些问题

标签： javascript angularjs amazon-s3 filereader aws-sdk

【解决方案1】：

如果您的 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';

【讨论】：

我的存储桶不能公开...有什么想法吗？
所以你应该使用适用于浏览器的 JavaScript SDK docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-intro.html

【解决方案2】：

您不会“获取”要显示的图像。您只需将图像 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 编码的数据 URI。编码函数是从here 借来的。这是一个有效的jsFiddle，已删除凭据。

【讨论】：

实际上我的问题是如何使用 img 标签以文件对象的形式显示您在 javascript 代码中拥有的图像
我已经更新了答案以满足您的要求。
你在 chrome 中遇到过资源不足的问题吗？我正在预加载一堆图像，但我认为它不起作用。
这很好用！超时对于触发摘要很重要。
>出于显而易见的原因，如果没有公共读取权限，它们将无法访问。是的，但您可以通过 cognito 或其他凭证访问它。在这种情况下，除非您使用某种预签名的 URL，否则仅使用 URL 是行不通的

【解决方案3】：

您只需提及存储在 s3 中的图像的 url。

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

这应该可行。

【讨论】：

【解决方案4】：

完全实现从 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>

【讨论】：

嗨@Liad Livnat ......如果可能的话，你能帮忙在angular 6中完成上述代码......thanx......
如果我提供密钥和访问密钥。安全吗？我认为应该只是确认是否有人可以以任何方式从浏览器中跟踪这些密钥。