Erhalten Sie Antwortkopfzeilen beim Laden eines Bildes aus AWS S3.

Question

Ich habe Bilder auf S3 gespeichert, deren Beschreibung in Metadaten gespeichert ist, gemäß ihrer Empfehlung zur Speicherung von Metadaten

Wie kann ich die Antwortheader abrufen, wenn das Bild direkt im Browser angezeigt wird? Ich habe versucht, im onload-Ereignis eines img-Elements nachzusehen, aber die Header nicht finden. Ich habe auch XMLHttpRequest ausprobiert, das mir die Header in der Antwort liefert, aber dann kann ich responseText nicht als img src verwenden.

Answer 1

Letztendlich fand ich dieses Fiddle und holte die Bilder über XMLHttpRequest, dann setzte ich die Beschreibung aus den Headern auf das Bild in ein benutzerdefiniertes Attribut:

function(image_path, img){ 
    // Verwende ein nativen XHR, damit wir den benutzerdefinierten Antworttyp verwenden können
    var xhr = new XMLHttpRequest();
    xhr.open("GET", image_path, true);

    // Fordere das Ergebnis als ArrayBuffer an.
    xhr.responseType = "arraybuffer";

    xhr.onload = function( e ) {
        // Erhalte eine blob: URL für die Bilddaten, um es zu zeichnen
        var arrayBufferView = new Uint8Array( this.response );
        var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
        var imageUrl = URL.createObjectURL( blob );
        img.src = imageUrl;

        // Hole die Beschreibung aus den S3-Metadaten
        var desc = this.getResponseHeader('x-amz-meta-description');
        img.setAttribute('data-description', desc);
    };
    xhr.send();
}

Answer 2

Wenn Sie die Antwortheader vor dem Laden des Bildes benötigen oder ohne das Laden des Bildes erhalten möchten, können Sie die head-Abfrage verwenden. Wenn diese Abfrage ausgeführt wird, erhalten Sie nur Header, was viel effizienter ist, wenn Sie nur benutzerdefinierte Daten ohne eine Datei benötigen.

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