生成图片验证码

思路

1，获得一个画布

2，实例化一个画笔

3，实例化字体

4，使用画笔，画对应的字符

5，保存验证码图片

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

7，将图片返回给浏览器

views.py代码实现

from PIL import Image,ImageDraw,ImageFont
import random
import io

#获得随机颜色
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()

    #画布大小
    image = Image.new("RBG",img_size,bg_color)
    
    #实例化画笔
    draw = ImageDraw.Draw(image,"RGB")

    #设置文字颜色
    text_color = (255,0,0)

    #创建字体
    font_path = "/home/xiaohuoche/gz/study/static/fonts/ADOBEARABIC-BOLDITALIC.OTF"
    
    #设置字体属性
    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,text_color,font)

    #记录给哪个请求发了什么验证码
    req.session['code'] = code_str

    #获得一个缓存区
    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.seeion.get("code")

        #做判断比较
        if server_code.lower() == code.lower():
            return HttpResponser("OK")
        else:
            return HttpResponse("fail")

前端页面login.html代码

<!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>

Django学习笔记（十三）:生成图片验证码和校验逻辑

生成图片验证码

思路

猜你喜欢