文件对象(图像)作为字典python中的值 [英] File object (image) as value in a dictionary python

问题描述

我正在构建一个 Web 应用程序，该应用程序将一些信息发送到 API(AWS 的 API 网关)并接收回图像和有关该图像的一些信息(字符串).字符串和图像由 python 编写的 lambda 函数(AWS 服务)生成.

这个想法是有一个简单的 html 页面，我在其中输入信息，按下一个按钮，在云端处理后，我会看到一个图像和一些信息.API网关接收到的json的管理在javascript中完成.

我已经有了管理 html 页面的代码，它已经过测试并且可以工作，为了完整起见，我将其展示:

function getImageFromLink(){返回获取(https://cors-anywhere.herokuapp.com/http://media.gta-series.com/images/gta2/maps/downtown.jpg")；}异步函数 buttonClick2(){const 返回 = await getImageFromLink();控制台日志(返回)；让想象 = 等待返回.blob();外部 = URL.createObjectURL(immagine);document.getElementById("image").src = 外部；

现在，我想返回一个 json:所有 kyes 都有字符串作为值，除了一个用于图像的值.

我该怎么做?我的意思是:如何将图像放入 python 中的 json(在 lambda 函数中)?我该如何在 javascript 中处理这个 json?

解决方案

选项 1(推荐且简单)

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

<块引用>

选项 2(针对您的情况)

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

{'image': '<你的 base64 编码>'}

并在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/

i'm building a web application that send some information to an API (API Gateway of AWS) and it receive back an image and some informations (strings) about that image. The strings and the image are generated by a lambda function (AWS service) written in python.

The idea is to have a simple html page where I enter information, press a button and after processing in the cloud I am shown an image and some information. The management of the json received by the API gateway is done in javascript.

I already have the code for the management of the html page, it is already tested and it works, I show it for completeness:

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;

Now, i wanted to do it returning a json: all kyes have strings as values except for one that is for the image.

How can i do that? I mean: how can i put the image into the json in python (in the lambda function)? And how do i have to handle this json in javascript?

解决方案

Option 1 (Recommended and easy)

Send url of image instead of sending the whole blob of image in your API response. the url can be a cloud location. This is recommended way.

Option 2 (For your case)

Convert your image into Base64 encoding in Python using base64 library and send it as a part of your json response.

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

And decode the base64 string on JS side:

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

Option 3 (Bit tricky and not preferred)

Here you can send the image as FormData, as multipart/form-data, which is not a great way to do. Refer to his on how to achive it - https://julien.danjou.info/handling-multipart-form-data-python/

这篇关于文件对象(图像)作为字典python中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！