显示从s3获取的图像

一尘不染

显示从s3获取的图像

angularjs

我想从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代码中的图像

阅读 222

2020-07-04

共1个答案

一尘不染

您无需“获取”要显示的图像。您只需将图像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。编码功能是从这里借来的。这是一个删除了凭据的有效jsFiddle。

2020-07-04