从AWS S3加载映像时获取响应标头

I have images stored on S3 with description stored in metadata, following their recommendation for storing metadata

根据他们对存储元数据的建议,我将图像存储在S3上,其中描述存储在元数据中

How can I retrieve the response headers when showing the image directly in the browser? I have tried looking in the onload event on an img element but can't find the headers. I have also tried XMLHttpRequest which gets me the headers in the response but I'm not then able to use the responseText as img src.

如何直接在浏览器中显示图像时如何检索响应标题?我试过在img元素上查看onload事件但找不到头文件。我也尝试过XMLHttpRequest,它在响应中获取了标题,但我不能将responseText用作img src。

2 个解决方案

#1

Eventually I found this fiddle and got the images via XMLHttpRequest, then set the desc from headers on to the image in a custom attribute:

最终我发现这个小提琴并通过XMLHttpRequest获取图像,然后将头文件中的desc设置为自定义属性中的图像:

function(image_path, img){ 
    // Use a native XHR so we can use custom responseType
    var xhr = new XMLHttpRequest();
    xhr.open("GET", image_path, true);

    // Ask for the result as an ArrayBuffer.
    xhr.responseType = "arraybuffer";

    xhr.onload = function( e ) {
        // Obtain a blob: URL for the image data to draw it
        var arrayBufferView = new Uint8Array( this.response );
        var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
        var imageUrl = URL.createObjectURL( blob );
        img.src = imageUrl;

        // Get the description from S3 metadata
        var desc = this.getResponseHeader('x-amz-meta-description');
        img.setAttribute('data-description', desc);
    };
    xhr.send();
}

#2

If you need to get response headers before image loading or without image loading, you can use head query.When this query is executed, you will receive only headers, is much more efficient if you need only custom data without a file.

如果您需要在图像加载之前获取响应标头或没有图像加载,您可以使用头部查询。执行此查询时,您将只接收标头,如果您只需要没有文件的自定义数据,则效率更高。

        $.ajax({url:imageUrl,type:"HEAD"}).always(function(data,content,xhr){
             var desc = xhr.getResponseHeader('x-amz-meta-description');
             console.log(desc)
        });