验证码制作

#string模块自带数字、字母、特殊字符变量集合，不需要我们手写集合
import string
import random
import os
import uuid

import settings
from  PIL import Image, ImageDraw, ImageColor, ImageFilter, ImageFont


class Code(object):
    # 生成随机生成数字或字母
    def random_hexdigits(self, len=1):
        return random.sample(string.hexdigits, len)
    
    # 生成干扰字符
    def punctuation(self, len=1):
        return tuple(random.sample(string.punctuation, len))
    
    # 定义干扰字符颜色
    def random_color(self, min=64, max=255):
        return tuple((random.randint(min, max) for i in range(3)))
    
    # 生成验证码
    def creat_code(self, width=80, height=24, color=(192, 192, 192)):
        image = Image.new('RGB', (width, height), color)
        #建议下载几款字体，变换下风格，我在setting粒定义了static路径，这里就直接导入了
        font = ImageFont.truetype(os.path.join(settings.STATICPATH, 'fonts/Lora-Regular.ttf'), 20)
        draw = ImageDraw.Draw(image)
        self.fill_color(draw, image, 5)
        self.fill_dischar(draw, image, 10)
        code = self.fill_char(draw, image, 4, 10, font)
        image_name = '{}.jpeg'.format(uuid.uuid4().hex)
        image_path = os.path.join(settings.STATICPATH, 'code/{}'.format(image_name))
        print(image_path)
        image.save(image_path)
        return {'code': code, 'image_path': image_path}
    
    # 填充颜色
    def fill_color(self, draw, image, interval):
        for i in range(0, image.width, interval):
            for j in range(0, image.height, interval):
                draw.point((i, j), fill=self.random_color())
    
    # 填充验证码
    def fill_dischar(self, draw, image, interval):
        for i in range(0, image.width, interval):
            dis = self.punctuation()
            j = random.randrange(3, image.height - 3)
            draw.text((i, j), dis[0], fill=self.random_color(64, 255))
    
    # 填充验证码
    def fill_char(self, draw, image, num, interval, font):
        code = ''
        for i in range(num):
            cha = self.random_hexdigits()
            code += str(cha[0])
            j = random.randrange(0, 5)
            # print(cha)
            # print(image.width*(i/num)+interval,j)
            draw.text((image.width * (i / num) + interval, j), cha[0], fill=self.random_color(32, 127), font=font)
        return code


if __name__ == "__main__":
    code = Code()
    print(code.creat_code())

flask路由配置

import os
from flask import Flask, Response
from flask import render_template
from utils.code import Code

app = Flask(__name__)


@app.route('/')
def Register():
    return render_template('verify.html')


@app.route('/codes/')
def code():
    infor = Code().creat_code()
    image_path = infor["image_path"]
    code = infor['code']
    
    print(image_path)
    with open(image_path, 'rb') as f:
        image_content = f.read()
    os.remove(image_path)
    return Response(image_content, mimetype='jpeg')


if __name__ == '__main__':
    app.run(debug=True)

前端配置

 <div class='form-row'>
            <form id="email_register_form" method="post" autocomplete="off">
                <div class="form-group ">
                    <label>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
                    <input type="text" id="id_email" name="email" value="None" placeholder="请输入您的邮箱地址"/>
                </div>
                <div class="form-group  ">
                    <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    <input type="password" id="id_password" name="password" value="None" placeholder="请输入6-20位非中文字符密码"/>
                </div>
                <div class="form-group captcha1 ">
                    <label>验&nbsp;证&nbsp;码</label>
                    <img src="/codes/" alt="captcha" title="点击切换" class="captcha"
                         onclick="this.src='codes/?'+Math.random()"/>
                    <input autocomplete="off" id="id_captcha_1" name="captcha_1" height="30px" type="text">
                </div>
                <input class="btn btn-green" id="jsEmailRegBtn" type="submit" value="注册"/>
            </form>

引用

github源码