python flask将读取的图片返回给web前端

  • A+
所属分类：Python

最近在做毕业设计系统可视化的时候，分析框架选择了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  
app.config['JSON_AS_ASCII'] = False  


CORS(app, supports_credentials=True)


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)
  
  return render_template('index.html',img_stream=img_stream)
  
  // 主函数
if __name__ == '__main__':
    
    
    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程序后，在网页地址栏输入地址访问。

python flask将读取的图片返回给web前端

避坑，网上有许多例子是这样的：

1、open(img_local_path, 'r') ，这样不会显示图片，正确的为：open(img_local_path, 'rb')
2、然后最关键的是：将这句base64.b64encode(img_stream)后加上.decode()，作用是把格式转为字符串。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin