javascript - 如何根据烧瓶中下拉选择的值加载图像？
问题描述
我的 HTML 页面上的下拉菜单很少。一个是国家下拉列表，另一个是标签下拉列表。我也有一个 get_image 按钮。当我选择一些国家和一些标签，然后单击 get_images 按钮时，将形成一个查询（我得到了正确的），然后我想在同一页面上相应地显示图像。我正在使用 python 烧瓶。它没有路由到浏览器中的 show_imgs，但是当我在浏览器中检查网络部分时，它给出了正确的结果。
应用程序.py
from flask import Flask, render_template, request, redirect, url_for, session, send_file, jsonify
app = Flask(__name__)
import json
from PIL import Image
import base64
import io
import cv2
import numpy as np
import json
import sqlite3
from datetime import date
import re
connection = sqlite3.connect("D:\\demo.sqlite",check_same_thread=False)
cursor = connection.cursor()
#@app.route('/sample_selector_dashboard', methods=['POST', 'GET'])
@app.route('/', methods=['POST', 'GET'])
def sample_selector_dashboard():
return render_template('sample_selector_dashboard.html')
@app.route('/show_imgs', methods=['POST', 'GET'])
def sample_selector():
if request.method == "POST":
sel_lbl = request.form['label_s'] # selected label
sel_country = request.form['country'] # selected country
sel_lbl = sel_lbl.strip('"')
sel_country = sel_country.strip('"')
qry = "select * from Cassis_Base indexed by country_signClass where y_CutOut IS NOT NULL AND u_CutOut\
IS NOT NULL AND v_CutOut IS NOT NULL AND y_CutOutW >1 AND y_CutOutH >1 AND Sensor_Platform != 'MFC_4xx'\
AND Sign_Class= '" + sel_lbl + "' AND Country = '" + sel_country + "' LIMIT 10"
rows = cursor.execute(qry).fetchall()
all_data_dict = {
"Sequence" : [],
"Timestamp" : [],
"Sign_Id" : [],
"Country" : [],
"Sign_Class" : [],
"y_Image" : []
}
for row in rows:
y = np.asarray(list(row[7]), dtype='uint8').view(np.uint16)
y = np.resize(y, (row[13], row[12]))
y = cv2.resize(y, (48, 48))
all_data_dict["Sequence"].append(row[0])
all_data_dict["Timestamp"].append(row[1])
all_data_dict["Sign_Id"].append(row[2])
all_data_dict["Country"].append(row[4])
all_data_dict["Sign_Class"].append(row[6])
all_data_dict["y_Image"].append(y)
encoded_imgs = []
for eachImage in all_data_dict["y_Image"]:
im = Image.fromarray(eachImage*16)
data = io.BytesIO()
im.save(data, "png")
encoded_img_data = base64.b64encode(data.getvalue())
encoded_imgs.append(encoded_img_data.decode('utf-8'))
all_data_dict["y_Image"] = encoded_imgs
sequence_lst = all_data_dict["Sequence"]
timestamp_lst = all_data_dict["Timestamp"]
sign_id_lst = all_data_dict["Sign_Id"]
country_lst = all_data_dict["Country"]
sign_class_lst = all_data_dict["Sign_Class"]
y_image_lst = all_data_dict["y_Image"]
return render_template('sample_selector_dashboard.html', y_images = y_image_lst)
if __name__ == '__main__':
app.run(debug=True) # default port = 5000
connection.commit()
HTML
{% extends 'base.html' %}
{% block body %}
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<div class="nav-item dropdown" id="select-class-dropdown">
<h4>Select Class</h4>
<select id="class_s" class="form-select" aria-label="Default select example"> <!-- class_s = classes -->
<option value=""></option>
</select>
</div>
<div class="nav-item dropdown" id="select-label-dropdown">
<h4>Select Label</h4>
<select id="label_s" class="form-select" aria-label="Default select example">
<option value=""></option>
</select>
</div>
<div class="nav-item dropdown">
<h4>Select Cluster</h4>
<select id="cluster" class="form-select" aria-label="Default select example">
<option selected value=""></option>
</select>
</div>
<div class="nav-item dropdown" id="select-country-dropdown">
<h4> Select Country</h4>
<select id="country" class="form-select" aria-label="Default select example">
<option selected>Select Cluster</option>
<option selected value=""></option>
</select>
</div>
<button type="button" id="get_images" class="btn btn-info" href="{{ url_for('sample_selector') }}" >Get Images</button>
<button type="button" id="bad" onclick="get_selected_samples_list_on_bad_button_click()" class="btn btn-danger" >Bad</button>
<button type="button" id="good" onclick="get_selected_samples_list_on_good_button_click()" class="btn btn-success">Good</button>
<button type="button" id="test" onclick="get_cassis_base_images_on_dropdown_select()" class="btn btn-warning">Test</button>
<button type="button" id="unselected" class="btn btn-secondary">Unselected</button>
<!-- <a id="get_images" href="{{url_for('sample_selector')}}" >Get images</a> -->
<label for="customRange2" id="img-per-page" class="form-label"><h4>Image per page</h4></label>
<p id= "img-per-page-p">current value</p>
<input type="range" class="form-range" min="100" max="500" id="customRange2">
</ul>
</div>
</div>
<!-- Image div here -->
<div class="col py-3">
{% set count = namespace(items=1) %}
{% for seq,t_stamp,sgn_id,cntry,sgn_cls,y_img in all_data %}
<img id={{count.items}} sequence={{ seq }}
timestamp={{ t_stamp }}
sign_id={{ sgn_id }}
country={{ cntry }}
sign_class={{ sgn_cls }}
onclick="select_samples(this.id)" src="data:image/jpeg;base64,{{ y_img }}">
{% set count.items = count.items + 1 %}
{% endfor %}
</div>
</div>
</div>
{% endblock %}
相关的 JavaScript 部分
// for GET Images
$(document).ready(function(){
$("#get_images").click(function(){
var label_s=$("#label_s").val();
var country=$("#country").val();
if(label_s == '')
{
alert("Select Label")
}
else if(country =='')
{
alert("Select Country")
}
else{
$.ajax({
url:'/show_imgs',
cache:false,
method:'POST',
data:{label_s:label_s,country:country},
success: function(res) {
alert("success")
}
});
}
});
});
解决方案
推荐阅读
- c# - 在文本框中输入的值内使用 LIKE 搜索
- elasticsearch - Kibana 索引模式刷新选项不再存在
- python-imaging-library - 将图像转换为 .ico 文件的问题
- angularjs - Angular 创建具有特定名称的新组件
- spring-boot - Spring Boot JPA计数查询按多个字段
- django - 我可以用 mock.patch('django.utils.timezone.now', mock.Mock(return_value=mocked)) 测试 celery 吗？
- regex - 如何替换字符串的多个子出现
- c++ - 如何在没有现有数据库的情况下缩短现有 C++ 代码
- c# - 在 C# 解决方案中查找并指示未引用的公共属性
- javascript - 当我尝试在 firebase 上部署反应应用程序时，npm run build 返回错误