想用jQuery中的Ajax实现“上传一张图片，经过处理以后在前端显示出来，且页面局部刷新”这个功能。但是目前只能把上传的图片保存在后台，但是经过处理的图片显示不出来，而且好像也不是局部刷新。有友友学习最近在学习这一块吗？帮我看看Orz
首先前端有两个图片框，一个显示上传的图片，一个显示处理后的图片（目前显示不了）；有两个按钮，一个点击了以后可以把上传的图片显示在第一个图片框，另一个点击以后会保存上传的图片，然后会对它做处理并保存处理以后的图片，然后就是把处理后的图片显示出来（目前显示这一步实现不了）
HTML代码：文件名HOG.html
{#图片框#}
<div>
<div class="picture">
<img src="../static/img/老君6.png" alt="等待上传" title="图片原图" id="img_origin" class="image"/>
</div>
<div class="picture">
<img src="../static/img/gray.png" alt="等待检测" title="图片灰度化后" id="img_gray" class="image"/>
</div>
</div>
{#提交按钮#}
<form action="{{ url_for('user.image_load') }}" method="POST" enctype="multipart/form-data">
<div class="btn_box">
<label id="hint_text">上传一张图片试试吧：</label>
<div class="user_defined_img">
<input type="file" name="btn_load" id="btn_load">
<label for="btn_load" class="button">点击上传图片</label>
<input type="submit" value="点击开始灰度化" id="btn_gray" onclick="gray()" class="button">
</div>
</div>
</form>
页面是这样的：
然后是python代码：文件名view.py
@blue.route("/HOG/", methods=["POST", "GET"])
def introduce_hog():
return render_template("HOG.html")
@blue.route("/image_load/", methods=["POST", "GET"])
def image_load():
if 'btn_load' not in request.files:
flash('No file part')
return redirect(url_for('user.image_load'))
origin_img = request.files['btn_load']
if origin_img.filename == '':
flash('No selected file')
return redirect(url_for('user.image_load'))
if origin_img and allowed_file(origin_img.filename):
filename = secure_filename(origin_img.filename)
origin_img.save(os.path.join(UPLOAD_FOLDER, filename)) # 保存前端上传过来的图片
img_stream = img_gray(os.path.join(UPLOAD_FOLDER, filename))
return img_stream
------------------------------------------下面是另一个.py文件里的------------------------------------------------------------------------
# 将图片转换成前端可以接收的形式
def transform_image(img_local_path):
with open(img_local_path, 'rb') as img_f: # 一定得是'rb'呀！
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream)
return img_stream
# 图片灰度化
def img_gray(path='./static/img/老君6.png'):
raw_data = np.fromfile(path, dtype=np.uint8) # 先用numpy把图片文件存入内存：raw_data，把图片数据看做是纯字节数据
# 1、灰度化
img = cv2.imdecode(raw_data, 0) # 参数0表示读取灰度图片
cv2.imwrite(UPLOAD_FOLDER+"/test_gray.png", img) # 这里一定要用绝对路径！
return transform_image(UPLOAD_FOLDER+"/test_gray.png")
然后是js代码：文件名是HOG.js
function gray() {
"use strict";
let img_src;
$.ajax({
type: 'POST',
url: "image_load",
async: false,
processData: false,
contentType: false,
success: function (res){
alert("检测完成!");
img_src = "data:image/png;base64,"+res;
console.log(img_src);
$("#img_gray").attr("src",img_src);
},
error: function (){
alert("检测失败!");
console.log("后台处理错误");
}
});
}
目前就是一点那个“点击开始灰度化”这个按钮就出错了，而且还把页面刷新了T-T，真不知道应该咋改了，有没有会的友友，顺便帮我推荐一些学习的途径可以吗，我现在就是一整个错了也不知道到哪里查的一个大动作T^T，不胜感激！
