图片验证码+前、后端使用

最新推荐文章于 2023-05-06 14:52:01 发布

_Zephyrus_

最新推荐文章于 2023-05-06 14:52:01 发布

阅读量1.1k

点赞数

分类专栏： Python 文章标签：图片验证码

本文链接：https://blog.csdn.net/wangxw1803/article/details/81667643

版权

Python 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

生成图片验证码

1 获得一个画布

2 实例化一个画笔

3 实例化字体

4 使用画笔画对应的字符

5 保存验证码图片

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

7 将图片返回给浏览器

获得随机颜色

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

import random

# 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")
    # 设置文字的颜色
    # text_color = (255, 0, 0)
    # 创建字体
    font_path = "/home/liuda/gz1083/codes/day07/static/fonts/ADOBEARABIC-BOLDITALIC.OTF"
    # 实例化字体 并指定大小是30
    font = ImageFont.truetype(font_path, 30)
    #准备源字符集
    source = "abcdefghijklmnopqrstJHHKJLHKHATQWERTYUIOPXCVBNM<DFGHJKL1234567890"

    # 保存每次随出来的字符
    code_str = ""
    for i in range(4):
    	#获得随机颜色
        text_color = get_random_color()
        # 获得随机数字
        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), "z", text_color, font)
    # draw.text((60, 20), "9", text_color, font)

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

图片验证码的使用

后端逻辑

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")
        #  做判断比较
        if server_code.lower() == code.lower():
            return HttpResponse("ok")
        else:
            return HttpResponse("fail")

前端

<!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="/t7/login" method="post" style="text-align: center">
        {%csrf_token%}
        <input type="text" placeholder="用户名" name="u_name">
        <br/>
        <!--放图片验证码-->
        <img src="/t7/verify_img" alt="" id="code">
        <br>
        <input type="text" placeholder="验证码" name="verify_code">
        <br>
        <input type="submit" value="登录">
    </form>
</body>
<script>
		#给图片添加点击事件
        $("#code").click(function () {
           #修改 图片的src属性
            $(this).attr("src", "/t7/verify_img" + Math.random());

        })
    </script>
</html>

_Zephyrus_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片验证码+前、后端使用

生成图片验证码1 获得一个画布2 实例化一个画笔3 实例化字体4 使用画笔画对应的字符5 保存验证码图片6 将生成的四个随机字符写入session 留着验证用7 将图片返回给浏览器获得随机颜色~~~ import random获得随机颜色def get_random_color(): R = random.randrange(255)...
复制链接

扫一扫