登录随机验证码

Posted 2022-01-28 penghengshan

• python代码

import random
# Image：用来生成图片  ImageDraw：用来在图片上"写字"  ImageFont：字体样式
from PIL import Image, ImageDraw, ImageFont
# BytesIO能保存数据，并且在取数据时会以二进形式返回, StingIO在取数据时会以字符串形式返回
from io import BytesIO, StringIO


# 获取随机三个rgb参数
def get_color():
    return random.randint(64, 255), random.randint(64, 255), random.randint(64, 255)


def get_color1():
    return random.randint(0, 196), random.randint(0, 196), random.randint(0, 196)


def get_code(request):
    # 生成图片对象，参数一传“RGB”，参数二传图片尺寸(元组)， 参数三传颜色
    img_obj = Image.new("RGB", (262, 33), get_color())
    # 生成一个画笔对象，该画笔可以在图片上随意图画
    img_draw = ImageDraw.Draw(img_obj)
    # 生成一个字体对象
    img_font = ImageFont.truetype("static/font/fang.ttf", 30)
    # 为图片的每个像素设置随机颜色
    for x in range(262):
        for y in range(33):
            img_draw.point((x, y), fill=get_color1())
    code = ""
    # 循环四次，生成一个4个字符的随机字符串
    for i in range(4):
        random_int = str(random.randint(0, 9))
        random_lower = chr(random.randint(97, 122))
        random_upper = chr(random.randint(65, 90))
        # 获取一个随机的字母或数字
        temp_code = random.choice([random_int, random_lower, random_upper])
        # 将获取的随机字符写到图片上（x,y坐标， 字符， 颜色， 字体）
        img_draw.text((60 + i * 40, 0), temp_code, get_color(), img_font)
        code += temp_code
    print(code)
    # 将最终生成的字符保存到session中,方便用户登录时验证码验证
    request.session["code"] = code
    # 生成一个BytesIO对象，该对象可看成文件句柄
    io_obj = BytesIO()
    # 将图片数据存入内存管理器中，需指定图片格式，否则报错
    img_obj.save(io_obj, "png")
    # 将二进制格式的图片数据发送给前端渲染
    return HttpResponse(io_obj.getvalue())

• html代码

 <div class="form-group">
     <label for="id_code">验证码</label>
     <div class="row">
            <div class="col-md-6 col-sm-6">
                <input type="text" class="form-control" id="id_code">
            </div>
            <div class="col-md-6 col-sm-6">
                <img src="/get_code/"  width=100% height=33px id="id_img">
            </div>
      </div>
 </div>

• js代码

// 用户点击验证码图片就能更换图片，只需在img标签的src属性后面加字符就可以
$("#id_img").on("click", function () 
   let old_url = $(this).attr("src");
   $(this).attr("src", old_url+"?")
);