AWS S3 getObject to image

时间:2018-01-24 18:15:07

标签: javascript html amazon-s3

' getObject'来自AWS S3 SDK的请求会返回一个' data.Body'例如' Uint8Array(51213)[137,80 ....'

如何转换此数据以在HTML标记中显示

<img id='imgTest' .....


s3.getObject({
    Bucket: 'mybuket',
    Key: "test/myImage.png"
}, function (errtxt, data) {
    if (errtxt) {
        console.Log("lireImage", "ERR " + errtxt);
    } else {
        console.log('lecture OK')
        let imageTest =document.getElementById('imgTest')
        imageTest.src = ????

感谢您的回答 YC

3 个答案:

答案 0 :(得分:5)

我不是在寻找图片的网址,因为如果我想从其网址加载此图片,则必须将此图片声明为“public”,否则会出现403(禁止)错误消息。

这就是我用's3.getObject'加载图像的原因,我的访问键声明并验证了's3'。通过这种方式,我们可以加载声明为私有的图像。

我不知道该怎么做才将收到的数据转换成图像。

在你给我的一个链接中,我找到了解决方案。

let imageTest =document.getElementById('imgTest')
s3.getObject({
    Bucket: 'myBucket',
    Key: "test/myimage.png"
}, function (errtxt, file) {
    if (errtxt) {
        console.Log("lireFic", "ERR " + errtxt);
    } else {
        console.log('lecture OK')
        imageTest.src = "data:image/png;base64," + encode(file.Body);
    }
});
function encode(data)
{
    var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },'');
    return btoa(str).replace(/.{76}(?=.)/g,'$&\n');
}

答案 1 :(得分:0)

您需要做的就是检索要显示的图像的网址。

请参阅以下答案:

Amazon S3 Access image by url

display images fetched from s3

答案 2 :(得分:0)

如果尝试访问刚刚上传的图像时访问被拒绝,则需要配置存储桶策略。

观看此视频:

https://www.youtube.com/watch?v=hLY0lQA_c7Q

对我有用。