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

Question

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

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

Answer 1

最终我发现这个小提琴并通过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();
}