Python 如何使用flask实时更新图像？

我正在使用flask（python）托管一个界面，允许用户上传图像，并使用滑块更改函数中的变量值，以减少图像中的噪声

滑块可以工作，但问题是每次我想看到更新图像上的值变化时，我都必须重新加载页面

我如何添加一个滑块来实时更新图像，这样我就不必不断地重新加载页面来查看更改

（如果滑块为0，我希望它能看到图像首次上传时的效果）

我正在做一些搜索，看起来我会使用jquery或其他什么，但我不知道如何实现它

谢谢你的阅读

app.py：

import os
from flask import Flask, render_template, request, send_from_directory,url_for, session, redirect
import cv2
import shutil


app = Flask(__name__)

APP_ROOT = os.path.dirname(os.path.abspath(__file__))


app.config['UPLOAD_FOLDER'] = os.path.join(APP_ROOT, 'images')
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0

@app.route("/")
def index():
    session.clear()
    return render_template("upload.html")

@app.route('/images/<filename>')
def uploadfile(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'],filename)

@app.route('/home')
def home():
    return render_template("completed.html", imgSrc="images/" + session.get('imgSrc') , message=session.get('message'))

@app.route("/upload" , methods = ['POST'])
def upload():
    target = os.path.join(APP_ROOT, 'images')

    if request.method == 'POST':

        if not os.path.isdir(target):
            os.mkdir(target)

        for file in request.files.getlist("file"):
            filename = file.filename

            destination = "/".join((target, filename))

            file.save(destination)

            filename = destination

            org = open(filename, 'rb')

            base = os.path.basename(filename)

            dir = os.path.dirname(filename)

            filename_cp = os.path.splitext(base)[0]

            filename_cp = "cp_"+filename_cp+os.path.splitext(base)[1]

            destination2 = dir+"/"+filename_cp
            file.save(destination2)

            cpy = open (destination2, 'wb')
            shutil.copyfileobj(org, cpy)

            session['image'] = filename
            session['filename'] = filename
            session['imgSrc'] = os.path.basename(destination)
            session['cimgsrc'] = os.path.basename(destination2)
            session['cpimg'] = destination2

            print("session", session)

    return render_template("completed.html",imgSrc="images/"+session.get('imgSrc'))

@app.route("/imgp/nr", methods=['post'])
def nr():
    print(session)

    img = cv2.imread(session.get('cpimg'), 0)
    #threshold = 40
    threshold = float(request.form['slider'])
    cv2.threshold(img, threshold, 255, cv2.THRESH_BINARY, img)
    print (session['cpimg'])
    cv2.imwrite(session.get('cpimg'),img)
    session['message'] = "NR is done!"
    session['imgSrc'] = os.path.basename(session['cpimg'])
    return redirect(url_for('home', op='nr'))

if __name__ =="__main__":
    app.secret_key = "abcdefghijklmnopqrstuvwxyz"
    app.run(port = 4555, debug = True)

导入操作系统
从flask导入flask、呈现\u模板、请求、从\u目录发送\u、url\u for、会话、重定向
进口cv2
进口舒蒂尔
app=烧瓶（名称）
APP_ROOT=os.path.dirname（os.path.abspath（_文件__））
app.config['UPLOAD\u FOLDER']=os.path.join（app\u ROOT，'images'）
app.config['SEND\u FILE\u MAX\u AGE\u DEFAULT']=0
@附件路线（“/”）
def index（）：
会话.清除（）
返回渲染模板（“upload.html”）
@app.route（“/images/”）
def上载文件（文件名）：
从_目录返回发送_（app.config['UPLOAD_FOLDER']，文件名）
@应用程序路径（“/home”）
def home（）：
返回render_模板（“completed.html”，imgSrc=“images/”+session.get（'imgSrc'），message=session.get（'message'））
@app.route（“/upload”，方法=['POST']））
def upload（）：
target=os.path.join（APP_ROOT，'images'）
如果request.method==“POST”：
如果不是os.path.isdir（目标）：
os.mkdir（目标）
对于request.files.getlist（“文件”）中的文件：
filename=file.filename
destination=“/”.join（（目标，文件名））
文件保存（目标）
文件名=目的地
org=open（文件名为'rb'）
base=os.path.basename（文件名）
dir=os.path.dirname（文件名）
filename\u cp=os.path.splitext（基本）[0]
filename\u cp=“cp”+filename\u cp+os.path.splitext（基本）[1]
destination2=dir+“/”+文件名\u cp
文件保存（目标2）
cpy=打开（目标2，“wb”）
copyfileobj（组织，cpy）
会话['image']=文件名
会话['filename']=文件名
会话['imgSrc']=os.path.basename（目标）
会话['cimgsrc']=os.path.basename（destination2）
会话['cpimg']=目标2
打印（“会话”，会话）
返回render_模板（“completed.html”，imgSrc=“images/”+session.get（'imgSrc'））
@app.route（“/imgp/nr”，methods=['post']））
def nr（）：
打印（会话）
img=cv2.imread（session.get（'cpimg'），0）
#阈值=40
阈值=浮动（request.form['slider']）
cv2.threshold（img，threshold，255，cv2.THRESH_二进制，img）
打印（会话['cpimg']）
cv2.imwrite（session.get（'cpimg'），img）
会话['message']=“NR已完成！”
会话['imgSrc']=os.path.basename（会话['cpimg']）
返回重定向（url_用于（'home'，op='nr'））
如果名称=“\uuuuu main\uuuuuuuu”：
app.secret_key=“abcdefghijklmnopqrstuvxyz”
运行（端口=4555，调试=True）

upload.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Upload</title>

</head>

<form id ="upload-form" action="{{ url_for ('upload') }}" method = "POST" enctype="multipart/form-data">
    <input type="file" name="file" accept = image/* multiple>
    <p>Drag your files here or click in this area.</p>
    <button type ="submit" value="Upload"> Upload</button>


</form>


<body>

</body>
</html>

上载
将文件拖到此处或单击此区域

上载

completed.hmtl（其中滑块和上载的图像为）：

标题
上传的文件
{{message}}

简单的回答是，您需要使用Javascript/jQuery来实现这一点。有一个类似的问题涉及两种方法：

或者通过ajax加载（base64转换的）图像；或

使用jquery更改页面上图像的

src

，使其重新加载

您可能需要更改代码的一些部分才能使其全部正常工作，但可能需要遵循以下几点：

app.py：

将

nr（）

函数更改为

GET

，并返回base64编码图像（

upload_file（）

函数）

completed.html：

向

/imgp/nr

添加一个ajax（以下是）调用，当滑块更改时，该调用会更改页面上图像的显示。例如：

...
<img id="yourImage" style="height:200px;width:300px;">
...


<script type="text/javascript">
$("#myRange").change(function(){
    var sliderVal = $(this).val();
    $.ajax({ 
        medthod: 'POST',
        url:'/imgp/nr/',
        data: JSON.stringify({slider: sliderVal}),
        success: function(data){
            $("#yourImage").attr('src', 'data:image/png;base64, ' + data);
        }
    });
});
</script>

。。。

---

这个代码可能需要一些修正，我没有太多时间来完善它对不起。希望你明白了

我正在看你链接的帖子，但我还是不明白它会如何改变我的app.py中threshold的值，以展示幻灯片中的变化。我添加了更多的细节，希望它能让你开始。抱歉，还有更多的问题，但我试图实现你上面发布的内容，但我仍然遇到问题。.change（函数）是否应该更改nr？哪个是阈值？

。change

是阈值，因此当范围滑块更改时，该函数将运行。您需要获取滑块的值才能提交到端点。我将在

$.ajax

和

url

上方进行快速编辑以进行演示。

...
<img id="yourImage" style="height:200px;width:300px;">
...


<script type="text/javascript">
$("#myRange").change(function(){
    var sliderVal = $(this).val();
    $.ajax({ 
        medthod: 'POST',
        url:'/imgp/nr/',
        data: JSON.stringify({slider: sliderVal}),
        success: function(data){
            $("#yourImage").attr('src', 'data:image/png;base64, ' + data);
        }
    });
});
</script>