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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Python知识库 -> Python Django Web开发——网页随机图片验证码的生成与使用，模拟登录使用验证码功能 -> 正文阅读

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

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());
    })
})