车标知识学习网页开发，与Flask通过base64展示二进制图片

万法同源

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

markdown添加图片

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

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

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

import base64

f open( 723.png , rb ) #二进制方式打开图文件

ls_f base64.b64encode(f.read()) #读取文件内容 转换为base64编码

f.close()

print(ls_f)

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()

base64展示图片

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

完善车标测试app

我们将获取车标网站的141中汽车品牌存储到了SQLite数据库中 结果如下

车标数据库

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

车标学习.gif

后台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 

 th 品牌 /th 

 td id idiom_name {{ car.Name }} /td 

 /tr 

 th 始于 /th 

 td id idiom_meaning {{ car.founded }} /td 

 /tr 

 th 车型 /th 

 td id idiom_example {{ car.models }} /td 

 /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,今天的内容就到这里

Flask学习与实战11：WebSocket的使用与简单通信 用这个协议最方便的就是，服务器主动向客户端推送信息。客户端也可以主动向服务器发送信息。属于应用层协议，在握手阶段还是使用了HTTP的协议。
Flask学习与项目实战9：WTF表单验证 Flask-WTF是简化了WTForms操作的一个第三方库。WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板。当然还包括一些其他的功能：CSRF保护，文件上传等。安装Flask-WTF默认也会安装WTForms，因此使用以下命令来安装Flask-WTF: pip install flask-wtf。
Flask学习与项目实战8：cookie与session的介绍与使用 cookie：在最开始的网站中，http请求是无状态的。也就是说即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不能知道当前请求是哪个用户。c
Flask学习与项目实战5：通过SQLAlchemy连接数据库进行ORM模型的简单增删改查 是对于数据库的ORM的框架，直接操作模型，安装命令为pip install SQLAlchemy。 SQLAlchemy是一个独立的ORMR框架，可以独立于FLASK存在，也可以在Django中使用。 Flask-SQLAlchemy是对SQLAlchemy的一个封装，更适合在flask使用。
Flask学习与项目实战4：视图高级之蓝图和子域名、类视图 对于大项目，代码都不放在app.py里面，需要分类。 即类似javaspringboot中的分层？每个功能分为一个更小规格的层次。 url_prefix 就是 蓝图的前缀。 和book相关的都在book中，和用户有关的都在user中。
Flask学习与项目实战3：简单入手模板及高阶使用 声明：本学习系列笔记是来源B站 知了传课 up主的教学视频的个人学习笔记，原up主教学视频地址：https://www.bilibili.com/video/BV17r4y1y7jJ?p=10。
Flask学习与项目实战2：url与视图函数映射、视图转url 访问book/list的url的时候发现是不可以访问的，因为我们返回额不是字典、元组等等，现在返回的是一个列表。 TypeError: The view function did not return a valid response. The return type must be a string, dict, tuple, Response instance, or WSGI callable, but it was a list.