• Django学习-25-图片验证码实例


    处理流程

      用户请求网页 --> 后台发送登录界面的静态页面 --> 后台在内存中生成验证码 --> 验证码保存在用户对应的Session中 --> 返回验证码图片到前端

      用户登录界面再加载生成后的图片验证码 --> 用户提交数据 --> 匹配相应的文本框和Session中的验证码

    HTML页面

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
        <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
        <link rel="stylesheet" href="/static/css/edmure.css"/>
        <link rel="stylesheet" href="/static/css/commons.css"/>
        <link rel="stylesheet" href="/static/css/account.css"/>
    </head>
    <body>
    <div class="login">
        <div style="font-size: 25px; font-weight: bold;text-align: center;">
            用户登陆
        </div>
        <form role="form" action="/login.html" method="POST">
            {% csrf_token %}
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control"  placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control"  placeholder="请输入密码">
            </div>
            <div class="form-group">
                <label for="password">验证码</label>
    
                <div class="row">
                    <div class="col-xs-7">
                        <input type="text" class="form-control" placeholder="请输入验证码" name="check_code">
                    </div>
                    <div class="col-xs-5">
                        <img src="/check_code.html" onclick="changeCheckCode(this);">
                        <!-- <img src="/static/imgs/avatar/20130809170025.png"> -->
                    </div>
                </div>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 一个月内自动登陆
                </label>
                <div class="right">
                    <a href="#">忘记密码?</a>
                </div>
            </div>
            <button type="submit" class="btn btn-default">登 陆</button>
        </form>
    </div>
        <script>
            function changeCheckCode(ths){
                ths.src = ths.src +  '?';    <!--改变URL,刷新图片。-->
            }
        </script>
    </body>
    </html>

    处理函数

    from io import BytesIO
    from django.shortcuts import HttpResponse
    from django.shortcuts import render
    from utils.check_code import create_validate_code
    
    
    def check_code(request):
        stream = BytesIO()          #开辟一块内存空间,不用写在外存,减少读写操作
        img, code = create_validate_code()
        img.save(stream,'PNG')
        request.session['CheckCode'] = code
        return HttpResponse(stream.getvalue())
    def login(request):
        if  request.method == 'POST':
            code = request.POST.get('check_code')
            if code.upper() == request.session['CheckCode'].upper():
                print('验证码正确')
            else:
                print('验证码错误')
        return render(request, 'login.html')

    生成图片的工具包

    import random
    from PIL import Image, ImageDraw, ImageFont, ImageFilter
    
    _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))
    
    
    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="Monaco.ttf",#依赖字体,需要下载相应的字体文件
                             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: 验证码字体,默认为 ae_AlArabiya.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)  # 创建画笔
    
        def get_chars():
            """生成给定长度的字符串,返回列表格式"""
            return random.sample(chars, length)
    
        def create_lines():
            """绘制干扰线"""
            line_num = random.randint(*n_line)  # 干扰线条数
    
            for i in range(line_num):
                # 起始点
                begin = (random.randint(0, size[0]), random.randint(0, size[1]))
                # 结束点
                end = (random.randint(0, size[0]), random.randint(0, size[1]))
                draw.line([begin, end], fill=(0, 0, 0))
    
        def create_points():
            """绘制干扰点"""
            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():
            """绘制验证码字符"""
            c_chars = get_chars()
            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)
    
        if draw_lines:
            create_lines()
        if draw_points:
            create_points()
        strs = create_strs()
    
        # 图形扭曲参数
        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
  • 相关阅读:
    列表基本操作——1
    条件判断与嵌套
    数据拼接与数据转换
    变量与赋值
    打印数与type()函数
    print()函数与打印字符串
    arduino开发ESP8266学习笔记二----按键控制LED灯
    arduino开发ESP8266学习笔记一 ----点亮一个LED灯
    无线充电
    EMC设计总结
  • 原文地址:https://www.cnblogs.com/cq146637/p/7831387.html
走看看 - 开发者的网上家园