Objek file (gambar) sebagai nilai dalam kamus python

Question

saya sedang membangun aplikasi web yang mengirim beberapa informasi ke API (API Gateway of AWS) dan menerima kembali gambar dan beberapa informasi (string) tentang gambar itu. String dan gambar dihasilkan oleh fungsi lambda (layanan AWS) yang ditulis dalam python .

Idenya adalah memiliki halaman html sederhana tempat saya memasukkan informasi, menekan tombol dan setelah memproses di cloud saya diperlihatkan gambar dan beberapa informasi. Pengelolaan json yang diterima oleh gateway API dilakukan dalam javascript .

Saya sudah memiliki kode untuk pengelolaan halaman html, sudah diuji dan berfungsi, saya tunjukkan untuk kelengkapannya:

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;

Sekarang, saya ingin melakukannya dengan mengembalikan json: semua kyes memiliki string sebagai nilai kecuali yang untuk gambar.

Bagaimana saya bisa melakukannya? Maksud saya: bagaimana saya bisa memasukkan gambar ke json dengan python (dalam fungsi lambda)? Dan bagaimana saya harus menangani json ini di javascript?

Answer 1

Opsi 1 (Disarankan dan mudah)

Kirim urlgambar alih-alih mengirim seluruh gumpalan gambar dalam respons API Anda. url bisa menjadi lokasi cloud. Ini adalah cara yang direkomendasikan.

Opsi 2 (Untuk kasus Anda)

Ubah gambar Anda menjadi Base64penyandian dalam Python menggunakan base64perpustakaan dan kirimkan sebagai bagian dari respons json Anda.

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

Dan decode string base64 di sisi JS:

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

Opsi 3 (Agak rumit dan tidak disukai)

Di sini Anda dapat mengirim gambar sebagai FormData, sebagai multipart/form-data, yang bukan cara yang bagus untuk dilakukan. Lihat miliknya tentang cara mencapainya -https://julien.danjou.info/handling-multipart-form-data-python/