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">
    <!-- 12313 -->
    <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 ...

头像很好看。。。。

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