main.py

# -*- coding: utf-8 -*-

from flask import render_template, redirect, url_for, session, flash, make_response
from . import auth
from app import db, utils

@auth.route('/VerifyCode/')
def get_verify_code():
    #把strs发给前端,或者在后台使用session保存
    #code_img, code_text = utils.generate_verification_code()
    code_img, code_text = utils.generate_verification_cn_code()
    session['code_text'] = code_text
    response = make_response(code_img)
    response.headers['Content-Type'] = 'image/jpeg'
    return response

@auth.route('/register', methods=['GET', 'POST'])
def register():
    form = RegisterForm()
    if form.validate_on_submit():
        username = form.username.data
        if 'code_text' in session and session['code_text'] != form.verification_code.data:
            flash('输入错误：%s' % form.verification_code.data)
        else:
            flash('输入验证码正确')
    return render_template('auth/register.html', form=form)

utils_en.py 生成普通验证码

# -*- coding: utf-8 -*-
import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter
from io import BytesIO

_letter_cases = "abcdefghjkmnpqrstuvwxy"  # 小写字母，去除可能干扰的i，l，o，z
_upper_cases = _letter_cases.upper()  # 大写字母
_numbers = ''.join(map(str, range(3, 10)))  # 数字
init_chars = ''.join((_letter_cases, _upper_cases, _numbers))
fontType = "Arial.ttf"


def create_validate_code(size=(120, 30),
                         chars=init_chars,
                         img_type="GIF",
                         mode="RGB",
                         bg_color=(255, 255, 255),
                         fg_color=(0, 0, 255),
                         font_size=18,
                         font_type=fontType,
                         length=4,
                         draw_lines=True,
                         n_line=(1, 2),
                         draw_points=True,
                         point_chance=2):
    '''
    @todo: 生成验证码图片
    @param size: 图片的大小，格式（宽，高），默认为(120, 30)
    @param chars: 允许的字符集合，格式字符串
    @param img_type: 图片保存的格式，默认为GIF，可选的为GIF，JPEG，TIFF，PNG
    @param mode: 图片模式，默认为RGB
    @param bg_color: 背景颜色，默认为白色
    @param fg_color: 前景色，验证码字符颜色，默认为蓝色#0000FF
    @param font_size: 验证码字体大小
    @param font_type: 验证码字体，默认为 Arial.ttf
    @param length: 验证码字符个数
    @param draw_lines: 是否划干扰线
    @param n_lines: 干扰线的条数范围，格式元组，默认为(1, 2)，只有draw_lines为True时有效
    @param draw_points: 是否画干扰点
    @param point_chance: 干扰点出现的概率，大小范围[0, 100]
    @return: [0]: PIL Image实例
    @return: [1]: 验证码图片中的字符串
    '''

    width, height = size  # 宽， 高
    img = Image.new(mode, size, bg_color)  # 创建图形
    draw = ImageDraw.Draw(img)  # 创建画笔
    if draw_lines:
        create_lines(draw, n_line, width, height)
    if draw_points:
        create_points(draw, point_chance, width, height)
    strs = create_strs(draw, chars, length, font_type, font_size, width, height, fg_color)

    # 图形扭曲参数
    params = [1 - float(random.randint(1, 2)) / 100,
              0,
              0,
              0,
              1 - float(random.randint(1, 10)) / 100,
              float(random.randint(1, 2)) / 500,
              0.001,
              float(random.randint(1, 2)) / 500
              ]
    img = img.transform(size, Image.PERSPECTIVE, params)  # 创建扭曲

    img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)  # 滤镜，边界加强（阈值更大）

    return img, strs


def create_lines(draw, n_line, width, height):
    '''绘制干扰线'''
    line_num = random.randint(n_line[0], n_line[1])  # 干扰线条数
    for i in range(line_num):
        # 起始点
        begin = (random.randint(0, width), random.randint(0, height))
        # 结束点
        end = (random.randint(0, width), random.randint(0, height))
        draw.line([begin, end], fill=(0, 0, 0))


def create_points(draw, point_chance, width, height):
    '''绘制干扰点'''
    chance = min(100, max(0, int(point_chance)))  # 大小限制在[0, 100]

    for w in range(width):
        for h in range(height):
            tmp = random.randint(0, 100)
            if tmp > 100 - chance:
                draw.point((w, h), fill=(0, 0, 0))


def create_strs(draw, chars, length, font_type, font_size, width, height, fg_color):
    '''绘制验证码字符'''
    '''生成给定长度的字符串，返回列表格式'''
    c_chars = random.sample(chars, length)
    strs = ' %s ' % ' '.join(c_chars)  # 每个字符前后以空格隔开

    font = ImageFont.truetype(font_type, font_size)
    font_width, font_height = font.getsize(strs)

    draw.text(((width - font_width) / 3, (height - font_height) / 3), strs, font=font, fill=fg_color)

    return ''.join(c_chars)

#################################
#返回验证码数据流和字符
def generate_verification_code():
    code_img, str_text = create_validate_code()
    buf = BytesIO()
    code_img.save(buf, 'JPEG', quality=70)
    buf_str = buf.getvalue()
    return buf_str, str_text

utils_cn.py中文验证码

import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter
from io import BytesIO
import codecs

class RandomChar():
  """用于随机生成汉字对应的Unicode字符"""
  @staticmethod
  def Unicode():
    val = random.randint(0x4E00, 0x9FBB)
    return chr(val)

  @staticmethod
  def GB2312():
    head = random.randint(0xB0, 0xCF)
    body = random.randint(0xA, 0xF)
    tail = random.randint(0, 0xF)
    val = ( head << 8 ) | (body << 4) | tail
    str = "%x" % val
    #
    return codecs.decode(str, 'hex_codec').decode('gb2312','ignore')

#默认字体为宋体，大多数系统都存在这种字体
class ImageChar():
  def __init__(self, fontColor = (0, 0, 0),
                     size = (100, 40),
                     fontPath = 'Songti.ttc',
                     bgColor = (255, 255, 255, 255),
                     fontSize = 20):
    self.size = size
    self.fontPath = fontPath
    self.bgColor = bgColor
    self.fontSize = fontSize
    self.fontColor = fontColor
    self.font = ImageFont.truetype(self.fontPath, self.fontSize)
    self.image = Image.new('RGBA', size, bgColor)

  def rotate(self):
    img1 = self.image.rotate(random.randint(-5, 5), expand=0)#默认为0，表示剪裁掉伸到画板外面的部分
    img = Image.new('RGBA',img1.size,(255,)*4)
    self.image = Image.composite(img1,img,img1)

  def drawText(self, pos, txt, fill):
    draw = ImageDraw.Draw(self.image)
    draw.text(pos, txt, font=self.font, fill=fill)
    del draw

  def randRGB(self):
    return (random.randint(0, 255),
           random.randint(0, 255),
           random.randint(0, 255))

  def randPoint(self):
    (width, height) = self.size
    return (random.randint(0, width), random.randint(0, height))

  def randLine(self, num):
    draw = ImageDraw.Draw(self.image)
    for i in range(0, num):
      draw.line([self.randPoint(), self.randPoint()], self.randRGB())
    del draw

  def randChinese(self, num):
    gap = 0
    start = 0
    strRes = ''
    for i in range(0, num):
      char = RandomChar().GB2312()
      strRes += char
      x = start + self.fontSize * i + random.randint(0, gap) + gap * i
      self.drawText((x, random.randint(-5, 5)), char, (0,0,0))
      self.rotate()
    print(strRes)
    self.randLine(8)
    return strRes,self.image

#################################
#返回验证码数据流和字符
def generate_verification_cn_code():
    ic = ImageChar(fontColor=(100,211, 90))
    str_text,code_img = ic.randChinese(4)
    buf = BytesIO()
    if code_img.mode != "RGB":
        code_img = code_img.convert("RGB")
   
    code_img.save(buf,'JPEG',quality=70)
    buf_str = buf.getvalue()
    return buf_str, str_text

模板

模板内采用了bootstrap-wtf中的quick_form自动生成表单，但是我们要对表单进行一些修改

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}博客注册{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    //修改提交按钮继承的类，按钮会变成蓝色
    $("#submit").attr("class", "btn btn-info");
    //修改提交按钮属性，上部外边界和宽度
    $("#submit").css({
        "width":"100%",
        "margin-bottom":"10px"
        });
    //增加一个img元素在验证码标签内，因为这些标签是quick_form自动生成的，所以我们要采用动态添加的方式
    function create_verify_code()
    {
        var img = $('<img id="verify_img" src="{{ url_for('auth.get_verify_code', _external=True) }}">');
        $("#verification_code").before(img);
    }
    //开始创建验证码图片
    create_verify_code();
    $(document).ready(function(){
        //点击验证码刷新，主要采取重设src属性，属性每次都要不一样，所以在网址后面增加参数
        $("img").click(function(){
            var img_url = "{{ url_for('auth.get_verify_code', _external=True) }}?d=" + Math.random();
            $(this).attr("src", img_url);
        });
    });
</script>
{% endblock %}
{% block page_content %}
<div class="col-md-4 col-md-offset-4">
{{ wtf.quick_form(form) }}
<div class="clear"></div>
<div class="register">
    <a type="button" class="btn btn-info" style="width:100%;" href="{{ url_for('auth.login') }}">已有账号？登录</a>
</div>
    </div>
{% endblock %}

效果图如下：

登录结果显示