车标知识学习网页开发,与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#
万法同源
一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书。技术的东西从来没人关注,扯东扯西的文章莫名的火。之前的一篇文章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.pyfrom flask import Flask, render_template
import base64
import requestsapp = 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.pyfrom flask import Flask, render_template, g
import sqlite3
import random
import base64app = 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展示二进制图片 #华为云·寻找黑马程序员#相关推荐
- 移动端开发语言的未来的猜想#华为云·寻找黑马程序员#
[摘要] #华为云.寻找黑马程序员# 不管是最早的Phonegap,还是后来的React Native.Weex,Flutter,或者是各个公司自创开发语言,都是在不断寻求开发语言统一,从而解决ios ...
- 三伏天里小试牛刀andriod开发 #华为云·寻找黑马程序员#
三伏天里小试牛刀andriod 开发 #华为云·寻找黑马程序员# 2019年07月,北京,三伏天,好热啊.越热自己还越懒得动换(肉身给的信号),但是做为产品经理/交互设计师的,总想着思考些什么(灵魂上 ...
- Flask开发VIP版HttpServer #华为云·寻找黑马程序员#
欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...
- 三伏天里小试牛刀andriod 开发 #华为云·寻找黑马程序员#
2019年07月,北京,三伏天,好热啊.越热自己还越懒得动换(肉身给的信号),但是做为产品经理/交互设计师的,总想着思考些什么(灵魂上给的信号),或者是学习些什么,更有利于将来的职业发展吧,哈哈哈.工 ...
- 使用Python开发小说下载器,不再为下载小说而发愁 #华为云·寻找黑马程序员#
需求分析 免费的小说网比较多,我看的比较多的是笔趣阁.这个网站基本收费的章节刚更新,它就能同步更新,简直不要太叼.既然要批量下载小说,肯定要分析这个网站了- 在搜索栏输入地址后,发送post请求获取数 ...
- Flask开发成语接龙游戏,以后闲了手机玩玩自己写的游戏吧!#华为云·寻找黑马程序员#
文章目录 明天你好,我叫干不倒 英语单词学习应用 成语接龙 接龙规则 实现分析 数据库信息 登陆排行 游戏界面 成语判断 拼音识别 代码编写 Jinjia2模板 Flask装饰器 游戏演示 手机搭建项 ...
- Flask使用bootstrap为HttpServer添加上传文件功能 #华为云·寻找黑马程序员#
一句题外话 昨天是老妈的生日,可惜周一上班没有办法为她庆生,只能电话问候下.但还是在这里补说一句"生日快乐!"(ps:我妈每天都会看我的公众号,哈哈-) 提个小需求 今天朋友说,之 ...
- Python开发还在用virtualenv?不如了解下pipenv...#华为云·寻找黑马程序员#
又见 Kenneth Reitz 之前公众号写了一篇文章爬虫新宠requests_html 带你甄别2019虚假大学,其中主要是为了介绍模块**requests_html,这个模块的作者还开发了req ...
- 车标知识学习网页开发,与Flask通过base64展示二进制图片
要开始忙碌了 今天开始负责另外一个项目的工作,估计之后的日子将会很忙碌了.最近熬夜搞的胃病又犯了,本来今天想停更一晚,可是胆子小怕好不容易关注的朋友们又离我而去,只能坚持不断更了... 直言不讳的有为 ...
最新文章
- abaqus最大应力准则怎么用_ANSYS与ABAQUS对比,你选择那个?
- 了解SQL和MySQL数据库
- vijos 观光旅游 最小环fl 呆详看
- 保姆级的HTML零基础教程少见吧?这是第一节(1)
- 360网络自动化运维
- proc文件系统探索 之 以数字命名的目录
- matlab 放射治疗,dicom-rt解析及在精确放射治疗计划系统中的应用.pdf
- 【linux-command not find解决方法 】
- [POJ1035]Spell checker
- Android App性能测试之二:CPU、流量
- 误删D盘数据怎么办?推荐使用数据恢复软件EasyRecovery
- 网站自动适配技术实现原理
- SQL Server新增字段并添加描述
- 初遇初识初知接下来是什么_娱乐圈隐藏学霸,演技零差评,张新成凭什么不火?...
- Source Insight入门教程
- 32种EMC标准电路分享-电路接口防护-标准参考电路
- Eclipse MyEclipse 代码提交时,让svn忽略classpath、target、.project
- 台钟的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- 计算机课件制作软件,浅谈计算机课件制作
- 房价会不会降?这位机器人八小时就能建造一栋房屋 | 聚焦
热门文章
- html设置窗口最小大小,调整HTML 5画布的大小以适应窗口
- go 写文件_GO 文档笔记
- jq往字符串中插入_jq: dom-插入
- 华为智慧屏华为正式发布鸿蒙,舒适大屏体验,华为智慧屏SE让智慧生活一步到位...
- python职业发展方向_59秒看懂IT运维的发展方向及职业规划
- 纯JS前端分页方法(JS分页)
- .net 发布程序时出现“类型ASP.global_asax同时存在于...”错误的解决办法
- 爬虫3 requests基础之 乱码编码问题
- Django获取当前页面的URL——小记
- C语言keywordstatic的绝妙用途