显示从s3获取的图像 [英] display images fetched from s3

问题描述

我想从s3获取图片并将其显示在我的HTML页面上。

I want to fetch images from s3 and display them on my HTML page.

Angular HTML文件：

Angular HTML file:

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

Angular Controller file：

Angular Controller file:

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 并尝试过这个：

I found something call FileReader and tried this one:

var reader = new FileReader();
reader.onload = function(event) {
    $scope.src = event.target.result;
}
reader.readAsDataURL(file);

但它显示错误：

未捕获TypeError：执行失败'FileReader'上的'readAsDataURL'：参数1不是'Blob'类型。


请帮我修改img标签中的图像文件代码
b $ b 我的S3存储桶不公开

编辑：

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


如何使用HTML图片标记 <以文件对象（s3 obj）的形式显示您的javascript代码中的图像/ p>

I am not interested in s3. what i want to know is that
how to display an image which you have in your javascript code in the form of a file object(s3 obj) using the HTML image tag

推荐答案

您没有获取要显示的图像。您只需将图像URL指向它们存储的位置（在您的情况下为S3）。因此，不要拉动单个对象，而是拉出该存储桶中的文件列表（ bucket.listObjects ），然后将它们添加到缩略图/图像的源中。

You don't "fetch" the images to display. You just point the image URL to the location where they are stored (S3 in your case). So instead of pulling individual object, pull the list of files in that bucket (bucket.listObjects) and then add them to the source of the thumbnails/images.

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

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

Assuming here that the files have read permission. They won't be accessible without public read permission for obvious reasons.

编辑：根据评论，问题是设法加载页面上的实际图像。以下是如何操作：

Based on the comment, the question is seeking to load the actual image on the page. Here's how to do it:

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获得的数据是字节数组。您需要将其转换为base64encoded数据URI。编码功能来自此处。这是一个正在使用 jsFiddle 并取消凭据的人。

The data you get from the S3 is byte array. You need to convert it into the base64encoded data URI. The encode function is borrowed from here. Here's one working jsFiddle with credentials removed.

这篇关于显示从s3获取的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！