从S3获取数据在html表示,javascript – 显示从s3获取的图像
发布日期:2022-03-15 11:49:57 浏览次数:10 分类:技术文章

本文共 1022 字,大约阅读时间需要 3 分钟。

您不会“获取”要显示的图像.您只需将图像URL指向它们存储的位置(在您的情况下为S3).所以,而不是拉单个对象,拉取该桶中的文件列表(bucket.listObjects),然后将它们添加到缩略图/图像的源.

$scope.s3Url = 'https://s3-.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,删除了凭据.

转载地址:https://blog.csdn.net/weixin_34596012/article/details/117841541 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:计算机考研能换专业吗,我本科学的是计算机专业,现在想考研,但是想换一个适合自己的专业,和教育方面有关的专业,请问有什么好专业能选择的么?...
下一篇:Android手机按键不灵,手机按键不灵怎么办 手机按键修改教程【详细步骤】

发表评论

最新留言

网站不错 人气很旺了 加油
[***.191.171.7]2022年08月21日 07时04分55秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章