<button id="take">拍照</button> <br /> <video id="v" style="width: 640px;height: 480px;"></video> <canvas id="canvas" style="display:none;"></canvas> <br /> <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo"> 前端拍照组件,后端怎么保存这图片,用flask来写
时间: 2023-07-19 10:56:37 浏览: 48
在前端拍照后,可以将图片数据通过 AJAX 或者 form 表单 POST 到 Flask 的一个接口,然后在 Flask 后端将接收到的图片数据进行处理和保存。
下面是一个简单的 Flask 后端代码示例:
```python
from flask import Flask, request
import base64
app = Flask(__name__)
@app.route('/upload_photo', methods=['POST'])
def upload_photo():
# 从 POST 请求中获取图片数据
photo_data = request.form['photo_data']
# 将 base64 编码的图片数据解码
photo_binary = base64.b64decode(photo_data)
# 将图片二进制数据保存到文件
with open('photo.jpg', 'wb') as f:
f.write(photo_binary)
return 'Photo uploaded successfully'
if __name__ == '__main__':
app.run()
```
在前端的代码中,可以使用 JavaScript 将拍照后的图片转换成 base64 编码的字符串,然后通过 AJAX 或者 form 表单 POST 到 Flask 的 `/upload_photo` 接口。
```javascript
// 获取拍照按钮和视频元素
var takeButton = document.getElementById('take');
var video = document.getElementById('v');
// 获取画布元素和图片元素
var canvas = document.getElementById('canvas');
var photo = document.getElementById('photo');
// 当拍照按钮被点击时执行以下代码
takeButton.onclick = function() {
// 将视频的当前帧绘制到画布上
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 将画布上的图像转换成 base64 编码的字符串
var photoData = canvas.toDataURL('image/jpeg');
// 发送 POST 请求到 Flask 后端
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload_photo', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send('photo_data=' + encodeURIComponent(photoData));
// 将拍照后的图片显示在图片元素上
photo.setAttribute('src', photoData);
}
```