图片验证码+前、后端使用
生成图片验证码
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
# 保存每次随出来的字符
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")
前端
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>