javascript - 显示从 s3 获取的图像

Question

我想从 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);

但是显示错误:
未捕获的类型错误:无法在“FileReader”上执行“readAsDataURL”:参数 1 不是“Blob”类型。

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

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

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

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

编辑:根据评论，问题是寻求在页面上加载实际图像。方法如下:

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。 encode 函数借自 here .这是一个工作 jsFiddle删除凭据。