Oggetto file (immagine) come valore in un dizionario python

Aug 25 2020

sto costruendo un'applicazione web che invia alcune informazioni a un'API (API Gateway di AWS) e riceve indietro un'immagine e alcune informazioni (stringhe) su quell'immagine. Le stringhe e l'immagine sono generate da una funzione lambda (servizio AWS) scritta in python .

L'idea è di avere una semplice pagina html in cui inserisco informazioni, premo un pulsante e dopo l'elaborazione nel cloud mi viene mostrata un'immagine e alcune informazioni. La gestione del json ricevuto dal gateway API avviene in javascript .

Ho già il codice per la gestione della pagina html, è già testato e funziona, lo mostro per completezza:

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;

Ora, volevo farlo restituendo un json: tutti i kyes hanno stringhe come valori tranne uno che è per l'immagine.

Come lo posso fare? Voglio dire: come posso inserire l'immagine nel json in python (nella funzione lambda)? E come devo gestire questo json in javascript?

Risposte

1 NishantPatel Aug 25 2020 at 17:19

Opzione 1 (consigliata e facile)

Invia urll'immagine invece di inviare l'intero blob dell'immagine nella tua risposta API. l'url può essere una posizione cloud. Questo è il modo consigliato.

Opzione 2 (per il tuo caso)

Converti la tua immagine in Base64codifica in Python usando base64la libreria e inviala come parte della tua risposta json.

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

E decodifica la stringa base64 sul lato JS:

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

Opzione 3 (un po' complicata e non preferita)

Qui puoi inviare l'immagine come FormData, come multipart/form-data, che non è un ottimo modo per farlo. Fai riferimento a lui su come ottenerlo -https://julien.danjou.info/handling-multipart-form-data-python/