Python Django Web开发——网页随机图片验证码的生成与使用，模拟登录使用验证码功能

2021-11-21 23:30:59 阅读：134 来源： 互联网

标签：Web code randrange Python random 验证码 color 256

1、使用Pillow库生成一个图片验证码

# 用pillow造一个验证码图片
def get_code(request):
    mode = 'RGB'
    size = (200, 100)
    red=random.randrange(256)

    green=random.randrange(256)

    blue = random.randrange(256)

    bg_color = (red, green, blue)
    # 创建一个画布
    image = Image.new(mode=mode, size=size, color=bg_color)
    # 创建画笔
    imagedraw = ImageDraw(image, mode=mode)

    imagefont=ImageFont.truetype(settings.FONT_PATH,50)

    verify_code=genarate_code()
    # 将生成的验证码存入session中，带客户提交是 取出与提交的验证码比对
    request.session['verify_code']=verify_code

    for i in range(4):
        # 实现4位字符串的颜色随机填充
        fill_color=(random.randrange(256),random.randrange(256),random.randrange(256))
        imagedraw.text(xy=(50*i, 0), text=verify_code[i],font=imagefont,fill=fill_color)

    # 增加随机点，增加识别难度
    for i in range(500):
        # 循环500次 每次增加一个点
        fill_color=(random.randrange(256),random.randrange(256),random.randrange(256))
        xy=(random.randrange(201),random.randrange(101))
        imagedraw.point(xy=xy,fill=fill_color)

    # 将生成的图片以内存流的形式  存储起来
    fp = BytesIO()
    image.save(fp, 'png')
    # 若不加上content_type,则会出现乱码，实际是告诉返回的文件类型
    return HttpResponse(fp.getvalue(),content_type='image/png')

随机生成一个验证码函数

def genarate_code():
    source="abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    code=''
    for i in range(4):
        code+=random.choice(source)
    return code

前端html文件

注意下面的 login.js 需要 load static

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
{#    加上点击事件，实现点击验证码刷新#}
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script type="text/javascript" src="{% static 'js/login.js' %}"></script>
</head>
<body>

<form action="{%  url 'app:login' %} }" method="post">
    <span>用户名：</span><input type="text" name="username" placeholder="请输入用户名">
    <br>
    <span>验证码：</span><input type="text" name="verify_code" placeholder="请输入验证码">
    <br>
    <img src="{% url 'app:get_code' %}" alt="点击换一张">
    <button>提交</button>
</form>

</body>
</html>

静态 login.js的设置

需要注意我们要随机生成一个路径，让程序认为路径变化，从而让function执行新路径。

$(function (){
    $("img").click(function (){
        console.log("点到了");
        // 此处$(this).attr("src","/app/getcode/") 如果路径是一样的，起不到刷新的作用，需要随机生成一个路径让function 生效
        $(this).attr("src","/app/getcode/?t="+Math.random());
    })
})

标签：Web,code,randrange,Python,random,验证码,color,256
来源： https://blog.csdn.net/weixin_44048169/article/details/121462435

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Python Django Web开发——网页随机图片验证码的生成与使用，模拟登录使用验证码功能

随机生成一个验证码函数

前端html文件

静态 login.js的 设置

静态 login.js的设置