最近在做毕业设计系统可视化的时候,分析框架选择了Python语言,但需要用前端来展示分析的结果,虽然考虑使用echarts图表来完成,对于简单的图表需要的数据格式简单,但是比如热力图所需的数据得自己去组装,Python后台画图很简单,一两句的事情,但是怎么把画好的图片放到html等前端显示呢,最近网上看了几个例子,但有些例子都没有达到正常显示图片,所以自己动手亲自试了一试。
原理:Python在后台把图片处理为Base64位的格式,再把Base64格式的图片在html用img控件显示。
补充:
flask页面中使用jinja2渲染引擎(使用真实值替换变量,再返回最终得到的字符串,这个过程称为“渲染”),在jinja2中,存在三种语法,有点类似springboot中thymeleaf的语法格式:
控制结构 :{% %}
变量取值: {{ }}
注释 :{# #}
Python主要代码:
from flask import Flask, jsonify, request, render_template
from flask_cors import CORS
app = Flask(__name__) # 实例化,可视为固定格式
app.debug = True # Flask内置了调试模式,可以自动重载代码并显示调试信息
app.config['JSON_AS_ASCII'] = False # 解决flask接口中文数据编码问题
#设置可跨域范围
CORS(app, supports_credentials=True)
# 展示Flask如何读取服务器本地图片, 并返回图片流给前端显示的例子
def return_img_stream(img_local_path):
"""
工具函数:
获取本地图片流
:param img_local_path:文件单张图片的本地绝对路径
:return: 图片流
"""
import base64
img_stream = ''
with open(img_local_path, 'rb') as img_f:
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream).decode()
return img_stream
// 跳转到html页面显示图片 app.route()为跳转路由,类似springboot
@app.route('/index')
def hello_world():
img_path = 'static/img/demo.png'
img_stream = return_img_stream(img_path)
# render_template()函数是flask函数,它从模版文件夹templates中呈现给定的模板上下文。
return render_template('index.html',img_stream=img_stream)
// 主函数
if __name__ == '__main__':
# app.run(host, port, debug, options)
# 默认值:host="127.0.0.1", port=5000, debug=False
app.run(host="127.0.0.1", port=5010)
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="data:;base64,{{ img_stream }}">
</body>
</html>
启动flask程序后,在网页地址栏输入地址访问。
避坑,网上有许多例子是这样的:
1、open(img_local_path, 'r') ,这样不会显示图片,正确的为:open(img_local_path, 'rb')
2、然后最关键的是:将这句base64.b64encode(img_stream)后加上.decode(),作用是把格式转为字符串。