Question

我正在用Angular编写一个Web应用程序，并且正在使用AWS S3来存储图像。

我需要在应用程序中显示图像并采用以下方法：

new AWS.S3().getObject({Bucket: 'very-secret-bucket', Key: uuid}, (err, data) => {
    return 'data:' + data.ContentType + ';base64,' + this.encode(data.Body)
})

如您所见：我从S3获取对象并将其转换为base64图像字符串。

在新的智能手机（iPhone X）上，这种方法非常慢（每个图像大于5秒）。

我尝试了另一种方法：

let imgSrc = 'data:' + data.ContentType + ';base64,' + btoa(String.fromCharCode.apply(null, data.Body));

当图像大于0.4 MB左右时，此方法会触发Maximum call stack size exceeded

问题：从S3（或类似来源）以编程方式获取图像的最有效方法是什么？

Answer 1

在网络上显示图像时，您可以考虑将存储桶公开，因此可以在html渲染中使用S3对象的直接URL：

<img src="url-of-s3-object" ...

如果必须进行授权，请考虑以下事项：

一种方法是使用预先生成的预签名URL将图像列表保存在数据库中的某个位置。然后，它将以相同的方式工作。

我想到的最后一个选择是通过AWS Gateway API创建一个S3代理，您可以在其中进行身份验证并获取URL。

最后两种方法都会带来对AWS SDK的独立性（只是http的REST调用），并将图像显示在浏览器中，这应该会提高性能。

Answer 2

如果您的对象是私有的，则只需获得一个签名的URL。

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#getSignedUrl-property

如何以编程方式从AWS S3获取img src

2 个答案: