Dateiobjekt (Bild) als Wert in einer Dictionary-Python

Question

Ich baue eine Webanwendung, die einige Informationen an eine API (API Gateway of AWS) sendet und ein Bild und einige Informationen (Strings) zu diesem Bild zurückerhält. Die Zeichenfolgen und das Bild werden von einer in Python geschriebenen Lambda-Funktion (AWS-Dienst) generiert .

Die Idee ist, eine einfache HTML-Seite zu haben, auf der ich Informationen eingebe, einen Knopf drücke und nach der Verarbeitung in der Cloud ein Bild und einige Informationen angezeigt bekomme. Die Verwaltung des vom API-Gateway empfangenen json erfolgt in Javascript .

Ich habe bereits den Code für die Verwaltung der HTML-Seite, er ist bereits getestet und funktioniert, ich zeige ihn der Vollständigkeit halber:

function getImageFromLink(){
    return fetch("https://cors-anywhere.herokuapp.com/http://media.gta-series.com/images/gta2/maps/downtown.jpg");
}

async function buttonClick2(){
    const returned = await getImageFromLink();
    console.log(returned);
    let immagine = await returned.blob();
    outside = URL.createObjectURL(immagine);
    document.getElementById("image").src = outside;

Jetzt wollte ich es tun, indem ich einen Json zurückgab: Alle Kyes haben Strings als Werte, außer einem, der für das Bild ist.

Wie kann ich das machen? Ich meine: Wie kann ich das Bild in Python (in der Lambda-Funktion) in den Json einfügen? Und wie muss ich mit diesem Json in Javascript umgehen?

Answer 1

Option 1 (empfohlen und einfach)

Senden Sie urlein Bild, anstatt den gesamten Bildfleck in Ihrer API-Antwort zu senden. Die URL kann ein Cloud-Speicherort sein. Dies ist ein empfohlener Weg.

Option 2 (für Ihren Fall)

Konvertieren Sie Ihr Bild Base64mithilfe der base64Bibliothek in Codierung in Python und senden Sie es als Teil Ihrer JSON-Antwort.

{'image': '<your base64 encoded>'}

Und entschlüsseln Sie die base64-Zeichenfolge auf der JS-Seite:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

Option 3 (etwas knifflig und nicht bevorzugt)

Hier können Sie das Bild als FormData senden, als Multipart/Form-Daten, was keine gute Möglichkeit ist. Beziehen Sie sich auf seine, wie man es erreicht -https://julien.danjou.info/handling-multipart-form-data-python/