将使用React-Webcam拍摄的图像发送到FastAPI服务器

1 年 ago

逸, 科

1 minute

首先

我在使用React的Web应用程序中调查了相机拍摄功能。
我不仅仅是做了拍摄，还试着将拍摄的图像发送到服务器。

使用React进行相机拍摄

如果要在 React 中使用相机，目前（截至2023年10月）有以下库可供选择。

https://github.com/mozmorris/react-webcam

react-html5-camera-photo

https://github.com/mabelanger/react-html5-camera-photo

react-camera-pro

https://github.com/purple-technology/react-camera-pro

由于其下载量和GitHub上的星星数量都超过其他选项，因此基本上建议从react-webcam开始考虑。

使用 React-webcam

只需要简单使用react-webcam，没有任何困难的问题，如下所述，只需使用即可。
如果要获取拍摄的图像，只需调用getScreenShot即可，这也很容易使用。
https://github.com/mozmorris/react-webcam#methods

将图像发送到服务器

只需将用React-webcam拍摄的图像直接显示出来是没有问题的，但如果要发送到服务器，则会有问题。

Fileオブジェクトを作成する

需要。
关于这个问题，只要搜索一下就会有很多信息。

https://zenn.dev/nana/articles/688636736ac1e9

示威活动

我尝试在 Code Sandbox 上使使用 react-webcam 拍摄的图像发送代码能够运行。
链接：https://codesandbox.io/s/react-webcam-example-tfq9cc

接收图像的服务器

为了接收上述发送的图像，我们将使用FastAPI创建一个服务器，以接收和保存图像。
要创建一个使用FastAPI上传文件的API，您可以参考以下链接，简单地创建它。
https://fastapi.tiangolo.com/tutorial/request-files/

这次，为了将上传的文件保存为JPEG格式，我们将通过PIL来进行保存。

import time
from PIL import Image
from fastapi import FastAPI, UploadFile

app = FastAPI()

@app.post("/image")
async def save_image(file: UploadFile):
    image = Image.open(BytesIO(await file.read()))
    image.save(f"{int(time.time() * 100000)}.jpg")
    return "ok"

仅需一种选项：提供以下参考资料的汉语本地化释义。

参考资料的中文翻译

https://blog.usize-tech.com/take-photo-by-react-app/