生成图片验证码
思路
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>