Flask-12 编写图形验证码的示例

• • • • 1、制作验证码代码示例
      • 2、表单类的创建WTF
      • 3、视图函数的使用
      • 4、模版中的使用
      • 5、运行并访问

效果展示：

目录结构：

|— font
	|—简粗圆.ttf
|— templates
	|—index.html
|— app.py
|— code_form.py
|— make_code.py

make_code.py

"""
@filename: make_code.py

制作验证码图片内容的文件，使用第三方库pillow制作

官方文档学习：https://pillow.readthedocs.io/en/stable/reference/Image.html
"""
import random

from PIL import Image, ImageFont, ImageDraw, ImageFilter

def get_random_color():
	# 获取随机颜色的数字rgb
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)


def generate_image(length):
    """制作验证码图片

    :param length: 验证码的长度
    :return: image:验证码图片, code：验证码内容
    """

    # 设置验证码内容抽取的数据源
    code_ku = 'yti1z2332453hsidhgisdlcFGH7qQ941RTYUasdgsiotyDSFGureg1634641AGSDF3as1fa'
    # 创建画布
    image = Image.new('RGB', (130, 50), color=get_random_color())
    
    # 创建字体（可以查下怎么下载字体，如果没有，也可以注释掉，这个不是重点）
    font = ImageFont.truetype("./font/简粗圆.ttf", size=35)
    
    # 创建ImageDraw对象
    draw = ImageDraw.Draw(image)
    
    # 绘制验证码
    code = ''
    for i in range(length):
        c = random.choice(code_ku)
        code += c
        draw.text((5 + random.randint(4, 7) + 25 * i, random.randint(4, 7)),  # (x,y坐标位置)，
                  # 左边距最小9，最大12，y轴最小4，最大7
                  text=c,
                  fill=get_random_color(),
                  font=font)

    # 绘制干扰线
    for i in range(10):
        x1 = random.randint(0, 130)
        y1 = random.randint(0, int(50 / 2))

        x2 = random.randint(0, 130)
        y2 = random.randint(int(50 / 2), 50)

        draw.line(((x1, y1), (x2, y2)), fill=get_random_color())

    image = image.filter(ImageFilter.EDGE_ENHANCE)  # 滤镜
    # image.show()  # 显示图片

    return image, code

code_form.py

from flask import session
from flask_wtf import FlaskForm
from wtforms import StringField

class UserForm(FlaskForm):
	code = StringField(label='验证码')
	
    def validate_code(self, data):
       """校验验证码"""
       input_code = data.data
       code = session.get('valid')
       
       # 用户输入和session中存的进行判断
       if input_code.lower() != code.lower(): 
       
           raise ValidationError('验证码错误')

app.py

from flask import Flask, session, make_response
from io import BytesIO
from make_code import generate_image
from code_form import UserForm

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
	uform = UserForm()
	if uform.validate_on_submit():
		return '这是一个post请求,提交成功'
	return render_template('index.html', uform=uform)

# 验证码图片
@app.route('/image')
def get_image():
    image, code = generate_image(4)

    buffer = BytesIO()  # 将image对象转为二进制
    image.save(buffer, 'jpeg')  # 以这个格式保存
    buf_bytes = buffer.getvalue()  # 读取buffer对象的内容

    # 保存在session
    session['valid'] = code

	# 制作响应内容
    response = make_response(buf_bytes)
    
    # 设置头部信息，主要给浏览器看的，知道是图片，按照图片的格式展示
    response.headers['Content-Type'] = 'image/jpeg'  
    return response
    
if __name__ == '__main__':
    app.run()

index.html

    
    



    
    
https://blog.csdn.net/xy_best_/article/details/{{ uform.code.label }}: https://blog.csdn.net/xy_best_/article/details/{{ uform.code }}
        
    
{% if uform.code.errors.0 %}
        https://blog.csdn.net/xy_best_/article/details/{{ uform.code.errors.0 }}{% endif %} 

    

最后运行app.py文件，进行访问即可（两种方式）

• 1、http://127.0.0.1:5000/
• 2、http://127.0.0.1:5000/image