Django笔记（Django实现生成图片验证码）

生成图片验证码逻辑

1.获得一个画布

2.实例化一个画笔

3.实例化字体

4.使用画笔画出对应的字符

5.保存验证码图片

6.将生成的四个随机字符写入session留着做验证

7.将图片返回给浏览器

settings.py配置

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

示例获取图片验证码代码

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

# Create your views here.



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 = '/home/ubuntu/gz1803/Newdjango/dj06/static/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 HttRseponse(buf.getvalue(), 'image/png')

定义随机颜色方法

import random

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

前端页面示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="/dj06app/login" method="post" style="text-align: center">
    <input type="text" placeholder="用户名" name="u_name">
    <br>
{#    图片验证码显示#}
    <img src="/dj06app/get_verify_img" alt="" id="code">
    <br>
    <input type="text" placeholder="验证码" name="verify_code">
    <br>
    <input type="submit" value="登录">
</form>
</body>
<script>
{#    js点击事件#}
    $("#code").click(function () {
        console.log("被执行了");
{#        Math 获取动态的图片#}
        $(this).attr("src", "/dj06app/get_verify_img" + Math.random());
    })
</script>
</html>

后端逻辑示例

def login_api(req):
    if req.method == 'GET':
        return render(req, 'login.html')
    else:
        params = req.POST
        # 用户输入的
        code = params.get("verify_code")
        # 从session获取的
        server_code = req.session.get("code")
        print(server_code)
        # 做判断比较
        if server_code.lower() == code.lower():
            return HttpResponse("验证成功")
        else:
            return HttpResponse('输入验证码错误')

Django笔记（Django实现生成图片验证码）

生成图片验证码逻辑

示例获取图片验证码代码

定义随机颜色方法

前端页面示例

后端逻辑示例

猜你喜欢