文件对象（图像）作为字典中的值 python

Question

我正在构建一个 Web 应用程序，该应用程序将一些信息发送到 API（AWS 的 API 网关），它会接收回图像和有关该图像的一些信息（字符串）。字符串和图像由写在 python.

中的 lambda 函数（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：所有 kyes 都有字符串作为值，除了用于图像的那个。

我该怎么做？我的意思是：如何将图像放入 python 中的 json（在 lambda 函数中）？我如何在 javascript 中处理这个 json？

Answer 1

Option 1 (Recommended and easy)

在您的 API 响应中发送 url 图像而不是发送整个图像块。 url 可以是云位置。这是推荐的方式。

Option 2 (For your case)

使用 base64 库将您的图像转换成 Base64 编码 Python 并将其作为 json 响应的一部分发送。

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

并在JS端解码base64字符串：

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

Option 3 (Bit tricky and not preferred)

在这里您可以将图像作为 FormData 发送，如 multipart/form-data，这不是一个好方法。参考他的实现方法 - https://julien.danjou.info/handling-multipart-form-data-python/

文件对象（图像）作为字典中的值 python

File object (image) as value in a dictionary python

javascript

python

api

web-applications