python生成验证码图片，点击图片的时候改变验证码_python获取验证码后变了

作者：很楠不爱3 | 2024-04-14 19:20:49

踩

python获取验证码后变了

先看结果：进去之后验证码显示，再生成的时候我将验证码放在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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/423715