辞書Pythonの値としてのファイルオブジェクト(画像)

Aug 25 2020

API (AWS の API ゲートウェイ) にいくつかの情報を送信し、画像とその画像に関するいくつかの情報 (文字列) を受信する Web アプリケーションを構築しています。文字列と画像はpython で書かれたラムダ関数 (AWS サービス) によって生成されます。

アイデアは、情報を入力し、ボタンを押すと、クラウドで処理した後、画像といくつかの情報が表示される単純な html ページを作成することです。APIゲートウェイで受信したjsonの管理はjavascriptで行います。

HTML ページを管理するためのコードが既にあり、テスト済みで動作しています。完全を期すために、コードを示します。

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;

今、私はjsonを返したいと思っていました.すべてのキーは、画像用のものを除いて、値として文字列を持っています.

どうやってやるの?つまり、Pythonのjsonに(ラムダ関数で)画像をどのように配置できますか?そして、このjsonをjavascriptでどのように処理する必要がありますか?

回答

1 NishantPatel Aug 25 2020 at 17:19

オプション 1 (推奨および簡単)

送信urlあなたのAPIレスポンスで画像の全体のブロブを送信するのではなく、画像の。URL はクラウドの場所にすることができます。おすすめの方法です。

オプション 2 (あなたの場合)

ライブラリをBase64使用して画像をPython のエンコーディングに変換し、base64json 応答の一部として送信します。

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

そして、JS 側で base64 文字列をデコードします。

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

オプション 3 (少しトリッキーで好ましくない)

ここでは、画像を FormData として、または multipart/form-data として送信できますが、これは適切な方法ではありません。それを達成する方法については、彼を参照してください -https://julien.danjou.info/handling-multipart-form-data-python/