Question

我正在尝试使用Angular JS从Amazon S3 Bucket显示图像。

我的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。

请帮助我： -

这是从Amazon S3检索图像的标准编码使用Angular JS？ file.Body应该是Uint8Array
如何将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);
        }
    });
}

如何在angularjs中显示来自Uint8Array的图像

1 个答案: