python生成验证码图片，点击图片的时候改变验证码

最新推荐文章于 2024-08-19 14:00:50 发布

惊天一刀

最新推荐文章于 2024-08-19 14:00:50 发布

阅读量3k

点赞数 2

分类专栏：人工智能

本文链接：https://blog.csdn.net/yang420097009/article/details/84785485

版权

人工智能专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先看结果：进去之后验证码显示，再生成的时候我将验证码放在session中，到时候你去和页面输入的进行比较，点击验证码可以变换验证码。

生成验证码的代码：

import random
import io
from PIL import ImageDraw
from PIL import ImageFont
import random
from django.shortcuts import render
from django.http import HttpResponse
from PIL import Image


# Create your views here.



# 获取随机颜色
def get_random_color():
    R = random.randrange(255)
    G = random.randrange(255)
    B = random.randrange(255)
    return (R, G, B)


def get_verify_img(req):
    # 定义画布背景颜色
    bg_color = get_random_color()
    # 画布大小
    img_size = (130, 70)
    # 定义画布
    image = Image.new("RGB", img_size, bg_color)
    # 定义画笔
    draw = ImageDraw.Draw(image, "RGB")
    # 创建字体（字体的路径，服务器路径）
    font_path = 'C:/Windows/Fonts/ADOBEARABIC-BOLDITALIC.OTF'
    # 实例化字体，设置大小是30
    font = ImageFont.truetype(font_path, 30)
    # 准备画布上的字符集
    source = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789"
    # 保存每次随机出来的字符
    code_str = ""
    for i in range(4):
        # 获取数字随机颜色
        text_color = get_random_color()
        # 获取随机数字 len
        tmp_num = random.randrange(len(source))
        # 获取随机字符 画布上的字符集
        random_str = source[tmp_num]
        # 将每次随机的字符保存（遍历） 随机四次
        code_str += random_str
        # 将字符画到画布上
        draw.text((10 + 30 * i, 20), random_str, text_color, font)
    # 记录给哪个请求发了什么验证码
    req.session['code'] = code_str

    # 使用画笔将文字画到画布上
    # draw.text((10, 20), "X", text_color, font)
    # draw.text((40, 20), "Q", text_color, font)
    # draw.text((60, 20), "W", text_color, font)

    # 获得一个缓存区
    buf = io.BytesIO()
    # 将图片保存到缓存区
    image.save(buf, 'png')
    # 将缓存区的内容返回给前端 .getvalue 是把缓存区的所有数据读取
    return HttpResponse(buf.getvalue(), 'image/png')

前端代码：

<!DOCTYPE html>
<meta name="referrer" content="no-referrer" />
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>

<body>
    <div>
        用户名：<input type="text" name="userName" id="username" value="{{ username }}">
        密码：  <input type="password" name="password" id="password" value="">
        验证码：  <input type="text" name="code" id="code" value=""> <img id="pic" style="height: 50px;margin-bottom: -8px;" src="/getCode">
        <input type="checkbox" name="remember" value="1">
        <input type="button" id="ajaxButton" value="登录">
        <a href="/toUpdatePwdPage" style="color: coral;">修改密码</a>
    </div>
<div style="color: red;display: none;" id="message"></div>
</body>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
    {% comment %}点击的时候验证码发生改变，他需要加一个随机的变量才会再次访问后台生成图片{% endcomment %}
    $("#pic").click(function () {
        console.log('被执行了')
        $(this).attr("src", "/getCode"+ Math.random())
    })


    $(function () {
        $("#ajaxButton").click(function () {
           var username = $("#username").val();
           var password = $("#password").val();
           var code = $("#code").val();
            var chk_value =[];
            $('input[name="remember"]:checked').each(function(){
                chk_value.push($(this).val());
            });
            var remember='';
            if(null!=chk_value && chk_value.length>0){
                remember = chk_value[0]
            }
            $.ajax({
             url: "/login",
             type: "post",
             data: {'username':username, 'password':password,'remember':remember,'code':code},
             async:true,
             dataType: "json",
             success: function(data) {
                 console.log(data)
                 if(data.res == '1'){
                       location.href ='/index/'+username
                 }else if(data.res == '-1'){
                     $("#message").show().text('验证码错误')
                 }else{
                      $("#message").show().text('用户名或密码错误')
                 }
               }

            });
        })
    })



</script>
</html>