Objeto de arquivo (imagem) como valor em um dicionário python

Question

estou construindo uma aplicação web que envia algumas informações para uma API (API Gateway da AWS) e recebe de volta uma imagem e algumas informações (strings) sobre essa imagem. As strings e a imagem são geradas por uma função lambda (serviço AWS) escrita em python .

A ideia é ter uma página html simples onde eu insiro informações, aperto um botão e depois de processar na nuvem me mostra uma imagem e algumas informações. O gerenciamento do json recebido pelo gateway da API é feito em javascript .

Já tenho o código para o gerenciamento da página html, já foi testado e funciona, mostro para completude:

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;

Agora, eu queria fazer isso retornando um json: todos os kyes têm strings como valores, exceto aquele que é para a imagem.

Como eu posso fazer isso? Quero dizer: como posso colocar a imagem no json em python (na função lambda)? E como eu tenho que lidar com esse json em javascript?

Answer 1

Opção 1 (recomendado e fácil)

Envio urlde imagem em vez de enviar todo o blob de imagem em sua resposta de API. o url pode ser um local na nuvem. Esta é a maneira recomendada.

Opção 2 (para o seu caso)

Converta sua imagem em Base64codificação em Python usando base64a biblioteca e envie-a como parte de sua resposta json.

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

E decodifique a string base64 no lado JS:

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

Opção 3 (um pouco complicada e não preferida)

Aqui você pode enviar a imagem como FormData, como multipart/form-data, o que não é uma ótima maneira de fazer. Consulte o dele sobre como alcançá-lo -https://julien.danjou.info/handling-multipart-form-data-python/