烧瓶返回图像对象

Posted 2023-02-19

【中文标题】烧瓶返回图像对象

【英文标题】：Flask return image object

【发布时间】：2021-07-24 07:23:33

【问题描述】：

我有一个 React Native 项目，我将一张照片发送到我的 Flask 后端进行一些图像处理，然后将处理后的图像返回给 React Native（对整个过程使用 POST 请求）。

我能够将图像接收到我的 Flask 应用程序中，并且能够运行处理，但是，我不知道如何将图像发送回 React Native。到目前为止，我已经尝试了所有方法，但没有将图像存储在任何地方，但我开始怀疑是否应该在烧瓶中创建一个临时图像文件（优缺点是什么）？

这是我目前所拥有的：

app.py (Flask)

@app.route('/analyze-img', methods=['POST'])
def analyze_img():
    # read image file
    filestr = request.files['FrontProfile'].read()
    npimg = np.frombuffer(filestr, dtype=np.uint8)
    img = cv.imdecode(npimg, cv.IMREAD_UNCHANGED)

    # process image
    img_annotated = process_img(img)

    # return output image
    retval, buffer = cv.imencode('.jpg', img_annotated)
    response = make_response(buffer.tobytes())
    return response

但是，由于某种原因，这会在响应中返回 undefined（我已经检查了进入 Flask 的数据是否正常）：

const photo =  uri: frontProfile, type: "image/jpeg", name: "photo.jpg" ;
var form = new FormData();
form.append("FrontProfile", photo);

await fetch("http://<my IP>:5000/analyze-img", 
  method: "POST",
  body: form,
)
  .then((resp) => resp.json())
  .then((json) => console.log(json))
  .catch((err) => console.error(err));

返回 JSON Parse error: Unexpected identifier "undefined" 将不胜感激！

【问题讨论】：

嗨，Ken，我不确定“由于某种原因在响应中返回未定义”是什么意思？

谢谢，我的意思是当我在 react native 中读取响应数据时（使用 fetch 后）它未定义，我将在上面添加一个编辑

你在 react native 中使用什么方法来读取响应数据？

我已经编辑了我上面的问题，包括我如何阅读响应，但我使用 response.json() 返回错误，因为响应未定义

【参考方案1】：

问题似乎出在：response = make_response(buffer.tobytes()) 行。根据make_response 文档，

make_response(rv) 将视图函数的返回值转换为 response_class 的实例。

参数 rv –

视图函数的返回值。视图函数必须返回 一个回应。返回无，或视图结束而不返回，是 不允许。 view_rv 允许以下类型：

str (Python 2 中的 unicode) 使用字符串创建响应对象 编码为 UTF-8 作为正文。

bytes (str in Python 2) 创建一个响应对象，其字节为 身体。

dict 一个字典，在返回之前将被 jsonify'd。

由于您将字节对象传递给此方法，make_response 不会隐式转换为您在客户端所期望的 JSON 格式。这可以通过使用来解决：response = make_response("payload": buffer.tobytes(), 200)

【讨论】：

谢谢，我尝试实现这一点，但出现以下错误：TypeError: Object of type bytes is not JSON serializable

请在构造 JSON 之前尝试类型转换 str

非常感谢，现在它似乎将某些东西返回到前端，但你知道我现在如何在前端重新创建图像吗？

是的，您将编码后的图像发送到客户端，您需要在 React Native 端使用 OpenCV 或其他一些图像轻量级解压缩库对图像进行解码。