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

要开始忙碌了

今天开始负责另外一个项目的工作，估计之后的日子将会很忙碌了。最近熬夜搞的胃病又犯了，本来今天想停更一晚，可是胆子小怕好不容易关注的朋友们又离我而去，只能坚持不断更了...

直言不讳的有为青年

由于不太喜欢csdn的发文审核，有时候几个小时半天的通过不了，所以从去年开始转到简书写文章。csdn上会将简书写好的markdown文章拷贝过去，至于什么时候审核通过，就不怎么关注了。昨天遇到件有趣的事情，以为小哥在我的成语接龙文章下回复说我转贴不注明。一时有点懵逼，看了半天才想起来优快云的名字是slaughterdevil，简书是清风Python，然后转过去大家还以为是两个人。顺便吐槽下csdn的这个回复的倒序显示，看这真乱...

直言不讳的小哥

面对互联网时代大范围的抄袭，有时候看到明明是抄袭的问题，翻来覆去就是那几个套路，也只能默默送上一句XXX。能遇到这样直言不讳的小哥，真的是值得点赞啊！

万法同源

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

markdown添加图片

其实文章没什么含量，就是介绍了下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()

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>
                    <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，如果你觉得不错，希望能动动手指转发给你身边的朋友们。