flask的模板引擎jinja入门教程 包含一个通过网络实时传输Video视频流的示例
本文首发于个人博客https://kezunlin.me/post/1e37a6/，欢迎阅读最新内容！
tutorial to use python flask jinja templates and a realtime video demo
Guide
Jinja delimiters
The default Jinja delimiters are configured as follows:
{% ... %} for Statements
{{ ... }} for Expressions to print to the template output
{# ... #} for Comments not included in the template output
# ... ## for Line Statements
url_for static(css+image)
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/bootstrap.min.css') }}">
<img src="{{ url_for('static', filename='images/1.PNG') }}" height="{{query_img_height}}" width="{{query_img_width}}">
You have by default the
staticendpoint for static files.
will be converted to
<link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css">
<img src="/static/images/1.PNG" height="1799" width="896">
url for static(pass image path)
<h1>Image {{image_filename}}</h1>
<img src="{{ url_for('static', filename = image_filename) }}" height="{{query_img_height}}" width="{{query_img_width}}">
notice we do't use
filename = {{image_filename}}
image_filenamewill be passed to html with valueimages/1.PNG
will be converted to
<h1>Image images/1.PNG </h1>
<img src="/static/images/1.PNG" height="1799" width="896">
filter
{% set result_count = result_list | length %}
{{ index | string ) }}
filter: length, string
debug html
url_for with params
python code
@app.route('/index')
@app.route('/')
def index():
return 'you are in the index page'
@app.route('/questions/<int:question_id>'):
#int has been used as a filter that only integer will be passed
# in the url otherwise it will give a 404 error
def find_question(question_id):
return ('you asked for question {0}'.format(question_id))
html page
<a href={{ url_for('index') }}>Index</a>
<a href = {{ url_for('find_question' ,question_id=1) }}>Question 1</a>
{% if kline_chart %}
<div class="chart">{{ kline_chart | safe }}</div>
{% endif %}
Realtime Video
index.html
<img src="{{ url_for('video_feed') }}" height="480" width="640">
main.py
#===================================================
outputFrame = None
lock = threading.Lock()
# initialize a flask object
app = Flask(__name__)
@app.route("/")
def index():
# return the rendered template
return render_template("index.html")
def generate():
# grab global references to the output frame and lock variables
global outputFrame, lock
# loop over frames from the output stream
while True:
# wait until the lock is acquired
with lock:
# check if the output frame is available, otherwise skip
# the iteration of the loop
if outputFrame is None:
continue
# encode the frame in JPEG format
(flag, encodedImage) = cv2.imencode(".jpg", outputFrame)
# ensure the frame was successfully encoded
if not flag:
continue
# yield the output frame in the byte format
yield(b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' +
bytearray(encodedImage) + b'\r\n')
@app.route("/video_feed")
def video_feed():
# return the response generated along with the specific media
# type (mime type)
return Response(generate(),
mimetype = "multipart/x-mixed-replace; boundary=frame")
#===================================================
# start the flask app
args = {"ip":"0.0.0.0","port":8888}
app.run(host=args["ip"], port=args["port"], debug=True,
threaded=True, use_reloader=False)
Example
index
# for web
from flask import Flask,Response,render_template
web_params = {
"query_key":"",
"query_segimg_filepath":"",
"query_segmask_filepath":"",
"query_img_height":0,
"query_img_width":0,
"result_list": []
}
# initialize a flask object
app = Flask(__name__)
@app.route("/")
def index():
global web_params
return render_template("search.html",**web_params)
# start the flask app
args = {"ip":"0.0.0.0","port":8888}
app.run(host=args["ip"], port=args["port"], debug=True,threaded=True, use_reloader=False)
index.html
<html>
<head>
<title>Query {{query_key}}</title>
</head>
<body>
<h1>Query Image {{ query_segimg_filepath }} </h1>
{#
<img src="{{ url_for('static', filename='images/1.PNG') }}"
height="30"
width="30">
#}
<img src="{{ url_for('static', filename = query_segimg_filepath) }}"
height="{{query_img_height}}"
width="{{query_img_width}}">
{#
<img src="{{ url_for('static', filename = query_segmask_filepath) }}"
height="{{query_img_height}}"
width="{{query_img_width}}">
#}
{% set result_count = result_list | length %}
<h1>Search Results #{{result_count}}</h1>
{% for i in range(0,result_count) %}
{% set item = result_list[i] %}
{% set segimg_filepath = item["segimg_filepath"] %}
{% set segmask_filepath = item["segmask_filepath"] %}
{% set img_height = item["height"] %}
{% set img_width = item["width"] %}
<h2>Top # {{i}} {{ segimg_filepath }}</h2>
<img src="{{ url_for('static', filename = segimg_filepath) }}" height="{{img_height}}" width="{{img_width}}">
{#
<img src="{{ url_for('static', filename = segmask_filepath) }}" height="{{img_height}}" width="{{img_width}}">
#}
{% endfor %}
</body>
</html>
Reference
History
- 20191005: created.
Copyright
- Post author: kezunlin
- Post link: https://kezunlin.me/post/1e37a6/
- Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.
flask的模板引擎jinja入门教程 包含一个通过网络实时传输Video视频流的示例的更多相关文章
- day94:flask:Jinjia2模板引擎&flask中的CSRF攻击&Flask-SQLAlchemy的创建模型类和基本的增删改查
目录 1.Jinjia2模板引擎 1.Jinjia2加载模板并传递数据到模板中 2.Jinjia2的模板语句 3.模板中特有的变量和函数 4.模板中内置的过滤器 5.自定义过滤器 6.模板继承 2.在 ...
- Python Flask Jinja2模板引擎
模板 简介 模板是一个包含响应文本的文件,其中包含用占位变量表示的动态部分,其具体值只在请 求的上下文中才能知道. 渲染 使用真实值替换变量,再返回最终得到的响应字符串,这一过程 称为渲染.为了渲染模 ...
- Springboot与Thymeleaf模板引擎整合基础教程(附源码)
前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...
- Springboot系列：Springboot与Thymeleaf模板引擎整合基础教程(附源码)
前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...
- Express入门教程：一个简单的博客
来自: http://ourjs.com/detail/56b2a6f088feaf2d031d2468 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, ...
- 无废话WCF入门教程六[一个简单的Demo]
一.前言 前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...
- 【转】WCF入门教程六[一个简单的Demo]
一.前言 前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...
- (转)PHP模板smarty简单入门教程
转之--http://blog.163.com/zf_2011@126/blog/static/166861361201062595057962/ 如何在smarty中开始我们程序设计.PHP代码:- ...
- 模板引擎ejs入门学习
1:利用 NPM 安装 EJS 很简单 npm install ejs 2:安装完成肯定就是使用了 var template = ejs.compile(str, options); template ...
随机推荐
- .Net,Java,Redis,Vue等技术视屏教程分享(不定期更新)
前言 作为一个资深的收藏家决定把我收集的那些精品资源不定时更新分享给大家 .所有资源全是收集余网络或为大佬分享,内容仅供观摩学习交流之用.如果犯了您的权益,请联系我. 2019.12.19更新 ASP ...
- 《Java基础知识》Java IO流详解
Java IO概念 1. 用于设备之间的数据传输. 2. Java 将操作数据流的功能封装到了IO包中. 3. 数据流流向分:输入流和输出流,操作对象为文件. 4. 流按照操作数据分:字节流(通用)和 ...
- Web基础了解版05-Servlet
Servlet Servlet? 从广义上来讲,Servlet规范是Sun公司制定的一套技术标准,包含与Web应用相关的一系列接口,是Web应用实现方式的宏观解决方案.而具体的Servlet容器负责提 ...
- SpringBoot IoC启动流程、初始化过程及Bean生命周期各个阶段的作用
目录 SpringBoot IoC启动流程.初始化过程及Bean生命周期各个阶段的作用 简述 首先明确IoC容器是啥 准备-SpringApplication的实例化 启动-SpringApplica ...
- （译）An introduction to Kubernetes
原文:https://www.jeremyjordan.me/kubernetes/(博客园团队推荐的) 这篇博客文章将对Kubernetes进行介绍,以便您了解该工具背后的动机,含义以及使用方式.在 ...
- docker快速部署本地项目到服务器（tomcat8+mysql8）
目标是:将本地运行的spring项目,部署到服务器上 为什么使用docker? 环境隔离 服务器上,各种环境交杂,使用docker,能清楚的把各个项目进行隔离,不单维护的人员方便,也会省去很多维护这些 ...
- CentOS 磁盘在线扩容
场景介绍: 操作系统Centos7.x 系统有一块vdisk,容量为20G,共分为3个区(swap和boot分区为标准分区xfs文件系统,根分区为LVM分区,xfs文件系统) 业务需求:在VM系统不关 ...
- luoguP4449 于神之怒加强版
题意 默认\(n\leqslant m\). 一波莫反后可得: \(\sum\limits_{T=1}^{n}\frac{n}{T}\frac{m}{T}\sum\limits_{d|T}d^k\mu ...
- .NET Core和无服务器框架
无服务器框架是一个云提供商无关的工具包,旨在帮助构建,管理和部署无服务器组件的操作,以实现完整的无服务器架构或不同功能即服务(FaaS).无服务器框架的主要目标是为开发人员提供一个界面,该界面抽象出云 ...
- Fibonacci数Python的四种解法
1: # 计算Fibonacci数: # Naive版本,时间效率O(1.618^n) # 记忆化版本(增加line8.10.13),时间效率O(n) # 注意:当n超过1000,可能超过系统允许的最 ...