辞書Pythonの値としてのファイルオブジェクト(画像)
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 (推奨および簡単)
送信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/