javascript - 如何在 angularjs 中显示 Uint8Array 中的图像

Question

我正在尝试使用 Angular JS 显示来自 Amazon S3 存储桶的图像。

我的 Amazon S3 CORS 配置如下:-

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

HTML 标签

<img ng-src="{{imgSrc}}">

检索图像的 Angular JS 代码如下:-

$scope.retrieveImage = function()
    {
       AWS.config.update({
                accessKeyId: "MyAccessKey", secretAccessKey: "MySecretKey"
            });

       var bucket = new AWS.S3({ params: { Bucket: "MyBucket" } });

       bucket.getObject({ Key: 'Datetime.png' }, function (err, file) {
         $scope.imgSrc= "";
       });
    }

getObject() 方法中的 file.Body 参数以 Uint8Array 形式出现。

请帮我解决这个问题:-

1. 这是从 Amazon S3 检索图像的标准编码吗？使用 Angular JS？ file.Body 应该始终以 Uint8Array 形式出现
2. 如何将 Uint8Array 对象转换为图像并在其中显示网页？请注意，上传的图像可以是任何格式，例如JPEG/PNG/GIF 等

如果有人能提供工作示例，那将会非常有帮助。

Answer 1

尝试这样:

$scope.retrieveImage = function() {
    var mypath = "https://mybucket.s3.amazonaws.com/Datetime.png";
    mypath = mypath.substr(1);
    AWS.config.update({
        accessKeyId: "MyAccessKey",
        secretAccessKey: "MySecretKey"
    });
    var bucketInstance = new AWS.S3();
    var params = {
        Bucket: "MyBucket",
        Key: mypath
    }
    bucketInstance.getObject(params, function(err, data) {
        if (data) {
            $scope.imgSrc= "data:image/jpeg;base64," + encode(data.Body);
        } else {
            console.log('error::', err);
        }
    });
}