flask传递前端多张图片流,前端将图片展示
时间: 2024-06-03 09:02:37 浏览: 19
1. 在Flask中定义路由,读取多张图片并将其转化为二进制流:
```python
from flask import Flask, Response, render_template
import cv2
app = Flask(__name__)
@app.route('/images')
def get_images():
# 读取图片
img1 = cv2.imread('image1.jpg')
img2 = cv2.imread('image2.jpg')
img3 = cv2.imread('image3.jpg')
# 将图片转换为二进制流
_, img1_encode = cv2.imencode('.jpg', img1)
_, img2_encode = cv2.imencode('.jpg', img2)
_, img3_encode = cv2.imencode('.jpg', img3)
# 将图片流存储到列表中
img_list = [img1_encode.tobytes(), img2_encode.tobytes(), img3_encode.tobytes()]
# 返回响应
return Response(generate(img_list), mimetype='multipart/x-mixed-replace; boundary=frame')
def generate(img_list):
# 生成多张图片流
for img in img_list:
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + img + b'\r\n')
```
2. 在前端页面中使用JavaScript将图片流展示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多张图片展示</title>
</head>
<body>
<div id="image-container"></div>
<script>
// 获取图片流并展示
var source = new EventSource("/images");
source.addEventListener('message', function(event) {
if (event.data) {
document.getElementById('image-container').innerHTML = '<img src="data:image/jpeg;base64,' + event.data + '">';
}
});
</script>
</body>
</html>
```