flask如何下载html<img>里面的图片

Mike_python小 · 发表于 2023-1-7 20:02:18

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

我用flask写了个实时获取摄像头的，他会推一个图片流到html的img然后我想要点击按钮flask就把这个img里的图片下载下来

百度找不到方法，在这里请教一下各位大佬

flask:

import cv2
from cv2 import imdecode
from flask import Flask, render_template, Response
import time
# from pyzbar import pyzbar
# import numpy as np
from pyzbar.pyzbar import decode
from PIL import Image
app = Flask(__name__)
@app.route('/')
def index():
return render_template(r'index.html')
def gen():
vid = cv2.VideoCapture(0)
while True:
return_value, frame = vid.read()
image = cv2.imencode('.jpg', frame)[1].tobytes()
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + image + b'\r\n')
print(image)
# cv2.imwrite("./1.png", image)
time.sleep(10)
@app.route('/sm')
def video_feed():
return Response(gen(), mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == '__main__':
app.run(host='0.0.0.0', port=80, debug = True)

复制代码

html:

<html>
<head>
<title>Video Streaming Demonstration</title>
<style>
#btn_snap {
margin: 0 auto;
border: 1px solid #f0f0f0;
background: #5CACEE;
color: #FFF;
width: 100px;
height: 36px;
line-height: 36px;
border-radius: 8px;
text-align: center;
cursor: pointer;
cursor: pointer;
/*禁止选择*/
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently not supported by any browser */
}
</style>
</head>
<body>
<h1>Video Streaming Demonstration</h1>
<img src="{{ url_for('video_feed') }}" height="500">
<div id="btn_snap" onclick="myfunction()">拍照</div>
</body>
</html>

复制代码

suchocolate · 发表于 2023-1-7 20:23:02

可以试试a标签：https://www.runoob.com/tags/att-a-download.html

Mike_python小 · 发表于 2023-1-7 20:33:12

suchocolate 发表于 2023-1-7 20:23
可以试试a标签：https://www.runoob.com/tags/att-a-download.html

你知道flask咋检测按钮是否被按下吗

wp231957 · 发表于 2023-1-7 22:35:52

本帖最后由 wp231957 于 2023-1-7 22:41 编辑

飘过------/////回复错了

阿奇_o · 发表于 2023-1-8 03:46:39

本帖最后由阿奇_o 于 2023-1-8 03:55 编辑

如果你搞过动态的图形验证码，基本可以做的出来。。原理也比较简单：

- 后端，可以专门为"截图"做一个请求地址，如 @app.route('/cap')，然后实现这个请求视图函数，如 def capture(): ... #返回截图即可。
- 前端，html里则需要js实现：每点击拍照按钮，就异步请求一次’/cap'获取到最新的截图，并更新显示。

我之前做过用户登录界面的验证码，但用的是Django而不是Flask，而且之前也没用ajax异步请求。。
另外，我发现自己没现成的摄像头，只好搞了手机做临时的摄像头。。

于是，折腾三四个小时。。再次凸显前端知识的不足。。不过值得高兴的是，最终还是基本实现了。。

登录/注册后可看大图

ps：你大概率会遇到两个难啃的问题/大坑：CSRF问题 和 流文件/图片的异步请求和图片展示的问题。。

Mike_python小 · 发表于 2023-1-8 06:55:07

阿奇_o 发表于 2023-1-8 03:46
如果你搞过动态的图形验证码，基本可以做的出来。。原理也比较简单：

- 后端，可以专门为"截图"做一个 ...

原来这么难啊，我以为有现成的函数可以调用呢

suchocolate · 发表于 2023-1-8 15:04:02

Mike_python小发表于 2023-1-7 20:33
你知道flask咋检测按钮是否被按下吗

检测按钮那是前端做的事情，不是flask。
你的目标是点击后下载，那用a最合适，想好看点就把a的样式改成button样式。

阿奇_o · 发表于 2023-1-8 19:17:00

Mike_python小发表于 2023-1-8 06:55
原来这么难啊，我以为有现成的函数可以调用呢

又研究了半个下午，发现通过前端JS也可以获取摄像头（而且似乎更流畅），具体参考：https://blog.csdn.net/huijiMC/article/details/109560819
但这样一来，就变成了要把拍照的图片从前端传到后端（不然你CV2和pyzbar就没图片处理了），也就是要用JS来实现异步上传图片、保存图片到后端。。

这样对前端JS不熟的，难度反而变大了。。

所以，所以，我就暂时不搞了，祝你好运。。

chinajz · 发表于 2023-1-8 21:14:40

suchocolate 发表于 2023-1-8 15:04
检测按钮那是前端做的事情，不是flask。
你的目标是点击后下载，那用a最合适，想好看点就把a的样式改成b ...

头像很好看。。。。

账号		自动登录	找回密码
密码			立即注册