django验证码

后端代码

import random
from io import BytesIO
from django.shortcuts import render, HttpResponse,reverse, redirectfrom PIL import Image, ImageDraw, ImageFont

# 获取随机rbg颜色
def get_random_color():
    # 返回多条数据费元组形式
    return random.randint(0, 255),random.randint(0, 255),random.randint(0, 255)


# 获取画布
def get_verify(request):
    # 画布背景颜色
    bg_color = get_random_color()
    # 画布大小
    bg_size = (130, 70)
    # 实例化图片对象
    img_obj = Image.new('RBG', bg_size, bg_color)
    # 创建画笔
    img_draw = ImageDraw.Draw(img_obj)
    # 创建字体
    img_font = ImageFont.truetype('/static/font/xian.ttf', 30)
    # 画布上显示的字符
    source = "qwertyuiopasdfghjkzxcvbnmQWERTYUIPASDFGHJKLCVBNM01234578"
    # 字符集的长度
    font_len = len(source)
    # 保存的空字符串
    code_str = ''
    # 生成随机的字符串
    for i in range(4):
        # 生成随机在长度内的数字
        choice = random.randrange(font_len)
        # 每次生成的字符
        font = source[choice]
        # 添加进空字符串code__str
        code_str += font
        # 添加进画布
        img_draw.text((10 + 30 * i, 0), font, get_random_color(), img_font)
    # 添加进session
    request.session['code'] = code_str
    # 获得一个缓存区
    io_obj = BytesIO()
    # 将图片保存进缓存区
    img_obj.save(io_obj, 'png')
    # 将图片返回给前端
    return HttpResponse(io_obj.getvalue())

 前端代码

<div class="col-md-6">
   <img id="id_img" src="/get_verify/" alt="" width="130" height="70">
</div>

Js实现点击切换图片

# 原理: 只需要改变路径就可以实现切换
$('#id_img').click(function () {
        let oldPath = $(this).attr('src');
        $(this).attr('src', oldPath + '?')
    });