zoukankan      html  css  js  c++  java
  • 登录验证码

    utils文件加下check_code.py为生成验证码的主要代码:

    pip3 install pillow

    #!/usr/bin/env python
    # -*- coding:utf-8 -*-
    
    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
    check_code.py
    from utils.check_code import create_validate_code
    from io import BytesIO
    
    def check_code(request):
    
    
        stream = BytesIO()  #创建内存对象
        img,code=create_validate_code()
    
        print(img,code)
    
        img.save(stream,'PNG')  #把图片写进内存里面
    
        request.session['checkcode']=code
    
        return HttpResponse(stream.getvalue())  #stream.getvalue()把内存中东西全部拿到
    views.py
    <!DOCTYPE html>
    <html lang="en"  class="no-js">
    <head>
    
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
    <link rel="stylesheet" href="/static/login-page/css/reset.css">
    <link rel="stylesheet" href="/static/login-page/css/supersized.css">
    <link rel="stylesheet" href="/static/login-page/css/style.css">
    
    </head>
    <body >
    
    {#<form action="{% url 'login'%}" method="POST">#}
    {##}
    {#<form action="{{request.path_info}}" method="POST">#}
    {##}
    {##}
    {#    <label for="name">用户名:</label>#}
    {#    <input type="text" id="name" name="username" placeholder="请输入用户名">#}
    {#    <label for="password">密码:</label>#}
    {#    <input type="password" id="password" name="pwd" placeholder="请输入密码">#}
    {#    <input type="submit" value="登录">#}
    {#    <span style="color: red">{{error_msg}}</span>#}
    {##}
    {#</form>#}
    
    <div class="page-container">
    <h1>Hello!</h1>
    <h1>终于等到你</h1>
    
        <form action="{% url 'xiaoqing-login' %}" method="POST" id="form">
            {% csrf_token %}
            <input type="text" name="username" class="username" placeholder="请输入用户名">
            <input type="password" name="password" class="password" placeholder="请输入密码">
            <img id='img' src="/xiaoqing/check_code.html">
            <button type="button">登录</button>
            <div class="error"><span>+</span></div>
    
        </form>
    
    </div>
    
    
    
    <script src="/static/login-page/js/jquery-1.8.2.min.js"></script>
    <script src="/static/login-page/js/supersized.3.2.7.min.js"></script>
    <script src="/static/login-page/js/supersized-init.js"></script>
    <script src="/static/login-page/js/scripts.js"></script>
    
    <script>
    
    
    
         $('#img').click(function () {
    
    
                    var url=$(this).attr('src');
                    $(this).attr('src', url+'?');
    
    
                })
    
        $(function () {
    
                $(":button").click(function () {
                $("#form").submit();
                                    })
    
    
    
    
            }
        )
    
    </script>
    
    </body>
    </html>
    login.html
  • 相关阅读:
    OutOfMemoryError异常穷举
    Java的锁优化
    Java的线程安全
    Java的线程模型
    算法笔记_014:合并排序(Java)
    算法笔记_013:汉诺塔问题(Java递归法和非递归法)
    算法笔记_012:埃拉托色尼筛选法(Java)
    算法笔记_011:希尔排序
    算法笔记_010:插入排序(Java)
    算法笔记_009:字符串匹配(Java)
  • 原文地址:https://www.cnblogs.com/sunhao96/p/9035837.html
Copyright © 2011-2022 走看看