- 前端 jQuery + AJAX 请求
$.ajax({
type : 'POST', // POST方法
// 服务器所在,注意要与app.py中的
// @app.route('/back_end', methods=['POST', 'GET'])
// 中的第一个参数相对应
url : '/back_end',
// 将data转换成JSON字符串(data为存储数据的变量的名)
// 该文章中,这个传送给服务器的data并未被使用
// 只是为了发起一个请求,得到服务器的反馈
data : JSON.stringify(data),
// 发送给服务器的数据类型
contentType: 'application/json; charset=UTF-8',
// 规定预期的服务器响应的数据类型
dataType : 'json',
// 请求成功后,接受服务器返回的数据,在参数img中({'ok': s})
success : function(img) {
var picture = document.createElement('img'); // 创建一个img元素
// 该img元素将会成为 id 为 pictureLocation 的 div 的孩子,需获取这个元素
var d1 = document.getElementById('pictureLocation');
// 设置这个img元素的一些属性
// img元素的 src 尤为重要:
// img.ok中存储的是图片的base64,且图片原先的格式是png;在 src 中均有体现
picture.src = 'data:image/png;base64,' + img.ok;
picture.alt = "";
picture.width = d1.clientWidth;
picture.height = d1.clientHeight;
d1.appendChild(picture);
},
// 请求出错执行的函数
error : function(xhr, type) {
alert("ERROR!");
}
});
- 服务器
from flask import Flask, request, jsonify
# app.py顶部要引入request, jsonify
@app.route('/back_end', methods=['POST', 'GET'])
def back_end(): # 获取前端数据,将图像base64反馈给前端
import base64
data = request.get_json() # data在本文中并未被使用
# open的第一个参数为图片所在路径,第二个为读取的方式
# 图像一般以二进制格式读取:rb
with open('static/image1.png', 'rb') as img_f:
img_stream = base64.b64encode(img_f.read())
s = img_stream.decode()
return jsonify({'ok': s}) # 返回JSON格式的数据