万法同源

一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书。技术的东西从来没人关注,扯东扯西的文章莫名的火。之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱乐为主的简书,都莫名的火爆,看图:

其实文章没什么含量,就是介绍了下markdown添加图片的方式,唯一新奇的可能就是使用了base64的图片二进制转化。

![avatar]\(data:image/png;base64,iVBORw0......)

1、使用python将图片转化为base64字符串

import base64
f=open('723.png','rb') #二进制方式打开图文件
ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码
f.close()
print(ls_f)

2、base64字符串转化为图片

import base64
bs='iVBORw0KGgoAAAANSUhEUg....' # 太长了省略
imgdata=base64.b64decode(bs)
file=open('2.jpg','wb')
file.write(imgdata)
file.close()

可我干嘛今天要说这事情呢?看标题喽…

前天我谢了一篇爬虫车标网,将数据存储的文章,里面涉及到了将图片进行二进制存储至数据库的操作。

通过**request.get(url).content**获取的二进制字符串,直接存储至SQLite数据库的BLOB字段中。如果我们需要显示图片,直接通过open函数的写入数据即可生成原始的图片。但是,如果我不想写入图片,而希望直接展示在web界面上呢?也可以通过markdown添加图片的方式,使用base64的编码来实现!

Flask展示图片例子

我们先不通过读取数据库,而是直接获取requests.get(url).content的方式测试Flask的图片展示。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="data:;base64,{{ img }}">
</body>
</html>

Flask后台代码:

# -*- coding: utf-8 -*-
# @Author : 王翔
# @JianShu : 清风Python
# @Date : 2019/7/24 0:25
# @Software : PyCharm
# @version :Python 3.7.3
# @File : image_show.py from flask import Flask, render_template
import base64
import requests app = Flask(__name__) @app.route("/show")
def show_image():
r = requests.get('http://img.chebiaow.com/thumb/cb/allimg/1303/1-1303061Z600520,c_fill,h_138,w_160.jpg')
image = base64.b64encode(r.content).decode('ascii')
return render_template('index.html', img=image) if __name__ == '__main__':
app.run()

图片展示OK,使用这种方式,我们就没必要将图片文件先从数据库中读取生成后,再通过url_for(‘static’,filename=‘x.png’)的方式进行显示了。

完善车标测试app

上次的爬虫文章爬取车标网图片与数据,以后不要说这什么车你不认识了!我们将获取车标网站的141中汽车品牌存储到了SQLite数据库中,结果如下:

那么今天,我们就把这些数据库信息配合Flask完成一个简单的车标学习简单网站吧,下来看看实现效果:

后台Flask代码:

# -*- coding: utf-8 -*-
# @Author : 王翔
# @JianShu : 清风Python
# @Date : 2019/7/25 1:37
# @Software : PyCharm
# @version :Python 3.7.3
# @File : app.py from flask import Flask, render_template, g
import sqlite3
import random
import base64 app = Flask(__name__)
DATABASE = 'static/db/car.db'
app.secret_key = 'Breeze Python' def connect_db():
return sqlite3.connect(DATABASE) @app.before_request
def before_request():
g.db = connect_db() @app.teardown_request
def teardown_request(exception):
if hasattr(g, 'db'):
g.db.close() def query_db(query, args=()):
cur = g.db.execute(query, args)
rv = [dict((cur.description[idx][0], value)
for idx, value in enumerate(row)) for row in cur.fetchall()]
if not query.startswith('select'):
g.db.commit()
return rv[0] if rv else None @app.route('/car')
@app.route('/')
def index():
id = random.randint(1, 141)
car_info = query_db('select name,image,founded,models,website from car_logo where id={}'.format(id))
car_info['image'] = base64.b64encode(car_info['image']).decode('ascii')
print(car_info)
return render_template('index.html', car=car_info) if __name__ == '__main__':
app.run(host='0.0.0.0', port=7000)

前台HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no">
<title>清风python</title>
<link rel="icon" href="{{ url_for('static',filename='favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">
<script src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
</head>
<body> <div class="container container-small">
<div class="content">
<div class="header">
车标学习
</div>
<div class="block-info">
<div class="form-group" align="center">
<p><img class="img-rounded" src="data:;base64,{{ car.image }}"></p>
</div>
<div class="form-group car-info">
<table class="table table-hover table-bordered table_show table-condensed">
<tbody>
<tr>
<th>品牌</th>
<td id="idiom_name"> {{ car.Name }}</td>
</tr>
<tr>
<th>始于</th>
<td id="idiom_meaning">{{ car.founded }}</td>
</tr>
<tr>
<th>车型</th>
<td id="idiom_example"> {{ car.models }}</td>
</tr>
<tr>
<th>官网</th>
<td id="idiom_example"> {{ car.website }}</td>
</tr>
</tbody>
</table>
</div> <div class="form-group ">
<a class="form-control btn-primary" href="{{ url_for('index') }}">换一个</a>
</div> </div>
</div>
<div class="footer">
©2019-欢迎关注我的公众号:<a href="https://www.jianshu.com/u/d23fd5012bed">清风Python</a>
</div>
</div> </body>
</html>

The End

OK,今天的内容就到这里,如果觉得内容对你有所帮助,欢迎点击文章右下角的“在看”。 公众号回复车标学习,下载整套代码及数据库信息。 期待你关注我的公众号清风Python,如果你觉得不错,希望能动动手指转发给你身边的朋友们。

来源:华为云社区征文 作者:清风Python

车标知识学习网页开发,与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#的更多相关文章

  1. Flask开发VIP版HttpServer #华为云·寻找黑马程序员#

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  2. 三伏天里小试牛刀andriod 开发 #华为云·寻找黑马程序员#

    2019年07月,北京,三伏天,好热啊.越热自己还越懒得动换(肉身给的信号),但是做为产品经理/交互设计师的,总想着思考些什么(灵魂上给的信号),或者是学习些什么,更有利于将来的职业发展吧,哈哈哈.工 ...

  3. 三伏天里小试牛刀andriod 开发 #华为云·寻找黑马程序员#【华为云技术分享】

    2019年07月,北京,三伏天,好热啊.越热自己还越懒得动换(肉身给的信号),但是做为产品经理/交互设计师的,总想着思考些什么(灵魂上给的信号),或者是学习些什么,更有利于将来的职业发展吧,哈哈哈.工 ...

  4. 使用Python开发小说下载器,不再为下载小说而发愁 #华为云·寻找黑马程序员#

    需求分析 免费的小说网比较多,我看的比较多的是笔趣阁.这个网站基本收费的章节刚更新,它就能同步更新,简直不要太叼.既然要批量下载小说,肯定要分析这个网站了- 在搜索栏输入地址后,发送post请求获取数 ...

  5. Python开发还在用virtualenv?不如了解下pipenv...#华为云·寻找黑马程序员#

    又见 Kenneth Reitz 之前公众号写了一篇文章爬虫新宠requests_html 带你甄别2019虚假大学,其中主要是为了介绍模块**requests_html,这个模块的作者还开发了req ...

  6. 移动端开发语言的未来的猜想#华为云&#183;寻找黑马程序员#【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  7. 2019年最新超级有趣好玩的html+css网页布局课程,前端入门基础,html5+css3零基础入门课程-黑马程序员pink老师精心录制

    大家好,我是黑马程序员pink老师!! 本次视频是前端零基础入门的课程,pink老师采取有趣好玩讲法,带你快乐的学习枯燥的html+css知识,学完之后让你能快速布局pc端页面.代码也可以讲的好玩有趣 ...

  8. 黑马程序员:轻松精通Java学习路线连载1-基础篇!

    编程语言Java,已经21岁了.从1995年诞生以来,就一直活跃于企业中,名企应用天猫,百度,知乎......都是Java语言编写,就连现在使用广泛的XMind也是Java编写的.Java应用的广泛已 ...

  9. 黑马程序员:3分钟带你读懂C/C++学习路线

    随着互联网及互联网+深入蓬勃的发展,经过40余年的时间洗礼,C/C++俨然已成为一门贵族语言,出色的性能使之成为高级语言中的性能王者.而在今天,它又扮演着什么样重要的角色呢?请往下看: 后端服务器,移 ...

随机推荐

  1. 「考试」weight

    正解是树剖. 首先Kru求最小生成树. 然后分别考虑树边和非树边的答案. 首先是非树边,非树边链接的两个点在MST上能够构成一条链. 这条链上最大的那条边-1就是这条边的答案. 为什么. 模拟Kru的 ...

  2. Oracle“ORA-00979:不是GROUP BY 表达式”解决方式

    今天在工作中碰到一个问题,用group by 语句进行分组时出现ORA-00979错误. 代码如下: select R.ORDER_NO, R.PRODUCT_CODE, R.REGION_NO, R ...

  3. 通俗易懂了解Vuex

    1.前言 在使用Vue进行开发的时候,关于vue组件通信的方式,除了通俗易懂了解Vue组件的通信方式这篇博文谈到三种通信方式,其实vue更提倡我们使用vuex来进行组件间的状态管理以及通信问题.Vue ...

  4. git命令--subtree

    目录 git命令--subtree subtree 主要命令 git subtree add   --prefix=<prefix> <commit> git subtree ...

  5. SSHD服务安全的连接

    SSHD服务 SSH 安全的远程连接 OpenSSH 工具 centos服务端的包:openssh-server centos客户端的包:openssh-clients 主要配置文件一般安装完成后再/ ...

  6. C语言程序设计100例之(4):水仙花数

    例4    水仙花数 题目描述 一个三位整数(100-999),若各位数的立方和等于该数自身,则称其为“水仙花数”(如:153=13+53+33),找出所有的这种数. 输入格式 没有输入 输出格式 若 ...

  7. PHP判断是否关注微信公众号

    PHP判断是否关注微信公众号 1 服务号直接请求这个接口https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140839 su ...

  8. 详解Spring Security的formLogin登录认证模式

    一.formLogin的应用场景 在本专栏之前的文章中,已经给大家介绍过Spring Security的HttpBasic模式,该模式比较简单,只是进行了通过携带Http的Header进行简单的登录验 ...

  9. [LC] 108题 将有序数组转换为二叉搜索树 (建树)

    ①题目 将一个按照升序排列的有序数组,转换为一棵高度平衡二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定有序数组: [-10,- ...

  10. Vue2.x与bootsrap-table动态添加元素和绑定事件无效

    一.问题:     最近在使用vue与bootstrap-table结合生成表格时,按以前的经验----每列数据可用formatter:function(value,row,index){}进行一些其 ...