Fatal编程技术网
  • javascript/
  • Javascript 显示从s3获取的图像

Javascript 显示从s3获取的图像

javascript angularjs amazon-s3

Javascript 显示从s3获取的图像,javascript,angularjs,amazon-s3,filereader,aws-sdk,Javascript,Angularjs,Amazon S3,Filereader,Aws Sdk,我想从s3获取图像，并将它们显示在我的HTML页面上 角度HTML文件： <section data-ng-controller="myCtrl"> <img ng-src="{{src}}" width="200px" height="200px"> </section> 我找到了一个名为文件阅读器的东西，并尝试了这个： var reader = new FileReader(); reader.onload = function(event) {

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

角度HTML文件：

<section data-ng-controller="myCtrl">
    <img ng-src="{{src}}" width="200px" height="200px">
</section>
我找到了一个名为文件阅读器的东西，并尝试了这个：

var reader = new FileReader();
reader.onload = function(event) {
    $scope.src = event.target.result;
}
reader.readAsDataURL(file);
但它显示错误：
未捕获类型错误：未能在“FileReader”上执行“readAsDataURL”：参数1不是“Blob”类型。

请帮助我在img标签中显示图像文件的代码
我的S3存储桶不公开

编辑：
我对s3不感兴趣。我想知道的是
如何使用HTML图像标记以文件对象（s3 obj）的形式显示javascript代码中的图像

如果您的s3文件是公共的（您必须更改它，默认情况下它不是公共的），您可以从该模式获取url：

https://s3-<region>.amazonaws.com/<bucket-name>/<key>
您不会“获取”要显示的图像。您只需将图像URL指向存储它们的位置（在您的示例中是S3）。因此，不要拉取单个对象，而是拉取该bucket中的文件列表（
bucket.listObjects
），然后将它们添加到缩略图/图像的源中。

从S3获得的数据是字节数组。您需要将其转换为Base64编码的数据URI。encode函数借用自。下面是一个删除凭据的操作。

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

https://mybucket.s3.amazonaws.com/myimage.jpg
这应该是可行的。

通过promise从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>
my bucket不能公开…你知道吗？所以你应该使用浏览器的JavaScript SDK。我可以问一下为什么你的bucket不能公开读取吗？如果您不这样做，您需要通过一个键访问bucket，如果您将一个键放入代码中，那么您的bucket基本上是非常公开的。@enpenax实际上我的问题是如何使用html图像标记以文件对象的形式显示javascript代码中的图像它现在工作了吗？我有一些问题实际上，我的问题是如何使用img标记以文件对象的形式显示javascript代码中的图像。我已经更新了答案以满足您的要求。您在chrome中是否遇到资源不足的问题？我正在预加载一堆图像，但我看不出这是可行的。这非常有效！超时对于触发摘要非常重要。>由于明显的原因，如果没有公共读取权限，将无法访问这些摘要。是的，但你可以通过cognito或其他凭证访问它。在这种情况下，仅使用URL是不起作用的，除非您使用某个sortHi@Liad Livnat的预签名URL……如果可能的话，请您帮助在angular 6中完成上述代码……thanx。。。。 
<section data-ng-controller="myCtrl">
    <img ng-src="{{s3Url}}{{image.Key}}" width="200px" height="200px" ng-repeat="image in allImageData">
</section>

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

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

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