核心参考代码1:
from flask import Flask, render_template
# from flask import Flask, render_template,Response,request
# import io
# import random
# import matplotlib.pyplot as plt
# from matplotlib import font_manager
# from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
# from matplotlib.figure import Figure
# import requests
# import json
# from bs4 import BeautifulSoup
# import io
# import base64
import pandas as pd
import numpy as np app = Flask(__name__) @app.route('/') def build_plot(): df = pd.DataFrame(np.random.random(size=(2, 5)))
#df = pd.Series(np.random.random(10)) fig = df.plot() fig.figure.savefig('static/pic.png') return render_template('pic.html') if __name__ == '__main__': app.debug = True app.run()
<!DOCTYPE html> <html> <title> Plot</title> <body> <img src="static/pic.png"> </body> </html>
参考代码<下载>:
下方案例在 https://www.cnblogs.com/exesoft/p/16054434.html 基础上升级而来。
py:
from Lib import gcode
from flask import Flask, render_template, request,url_for
import matplotlib.pyplot as plt
import pandas as pd
import numpy as np
import base64
from io import BytesIO
app = Flask(__name__)
@app.route('/')
@app.route('/Index')
def Index():
return render_template('Index.html')
@app.route('/PrimeShow',methods = ['POST', 'GET'])
def PrimeShow():
if request.method == 'POST':
data= request.form
imax=int(data["imax"])
primeList=gcode.getPrime(imax)
df=pd.DataFrame(primeList,index=np.arange(1,len(primeList)+1))
fig = df.plot()
buffer = BytesIO()
fig.figure.savefig(buffer,dpi=900,bbox_inches='tight')
buffer.seek(0)
plot_data = buffer.getvalue()
imb = base64.b64encode(plot_data)
ims = imb.decode()
return render_template("PrimeShow.html",primeList = primeList,img_stream=ims)
if __name__ == '__main__':
app.run(debug = True)
PrimeShow.html:
<!DOCTYPE html> <html> <head> <title>结果</title> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <link rel="stylesheet" href="{{url_for('static',filename='bootstrap4/css/bootstrap.css')}}" type="text/css"> </head> <body> <div class="container mt-2"> <table class="table table-striped table-hover"> <tr> <th class="bg-primary">顺序</th><th class="bg-success">质数</th><th class="bg-danger">备注</th> </tr> {% for prime in primeList %} <tr> <td>{{loop.index}}</td><td>{{prime}}</td> <td> {% if prime%10==9 %} <span class="badge badge-warning"> 末尾数为9,好数字! </span> {% endif %} </td> </tr> {% endfor %} </table> <figure class="figure" style="width: 60%"> <img src="data:;base64,{{ img_stream }}" class="figure-img img-fluid rounded shadow"> <figcaption class="figure-caption text-right">质数图</figcaption> </figure> </div> </body> </html>
其它参考代码1:
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
@app.route('/')
def hello_world():
img_path = '/home/hogan/Googlelogo.png'
img_stream = return_img_stream(img_path)
return render_template('index.html',
img_stream=img_stream)
其它参考代码2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flask Show Image</title> </head> <body> <img style="width:180px" src="data:;base64,{{ img_stream }}"> </body> </html>
结果展示界面[响应式风格]升级:
PrimeShowB.html
<!DOCTYPE html> <html> <head> <title>结果</title> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <link rel="stylesheet" href="{{url_for('static',filename='bootstrap4/css/bootstrap.css')}}" type="text/css"> </head> <body> <div class="container mt-2"> <table class="table table-striped table-hover"> <tr> <th class="bg-primary">顺序</th><th class="bg-success">质数</th><th class="bg-danger">备注</th> </tr> {% for prime in primeList %} <tr> <td>{{loop.index}}</td><td>{{prime}}</td> <td> {% if prime%10==9 %} <span class="badge badge-warning"> 末尾数为9,好数字! </span> {% endif %} </td> </tr> {% endfor %} </table> <figure class="figure" style="width: 60%"> <img src="data:;base64,{{ img_stream }}" class="figure-img img-fluid rounded shadow"> <figcaption class="figure-caption text-right">质数图</figcaption> </figure> </div> </body> </html>
升级版PrimeShowC.html
<!DOCTYPE html> <html> <head> <title>结果</title> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <link rel="stylesheet" href="{{url_for('static',filename='bootstrap4/css/bootstrap.css')}}" type="text/css"> <style type="text/css"> .figure-img,.table{ box-shadow: 2px 2px 8px grey; } h2{ text-shadow: 2px 2px 5px grey; } </style> </head> <body> <div class="container mt-2"> <h2 class="h2 text-center">结果</h2> <table class="table table-striped table-hover"> <tr class="row d-none d-md-table-row"> <th class="col-4 bg-primary">顺序</th> <th class="col-4 bg-success">质数</th> <th class="col-4 bg-danger">备注</th> </tr> {% for prime in primeList %} <tr class="row d-md-table-row"> <td class="col-md-4"> <span class="bg-danger d-sm-inline d-md-none">顺序:</span>{{loop.index}} </td> <td class="col-md-4"> <span class="d-sm-inline d-md-none">质数:</span>{{prime}} </td> <td class="col-md-4"> <span class="d-sm-inline d-md-none">备注:</span> {% if prime%10==9 %} <span class="badge badge-warning">末尾数为9,好数字!</span> {% endif %} </td> </tr> {% endfor %} </table> <figure class="figure" style="width: 60%"> <img src="data:;base64,{{ img_stream }}" class="figure-img img-fluid rounded border p-4"> <figcaption class="figure-caption text-center">质数图</figcaption> </figure> </div> </body> </html>
