# 生成验证码
from PIL import Image,ImageDraw,ImageFont
from io import BytesIO
from .myutil import get_random_color
def get_confirm_code(req):
# 实例化画布 img_size = (150,70) #画布大小 img_color = get_random_color() #画布颜色 img = Image.new('RGB',img_size,img_color) #新建画布传入画布模式，大小，颜色 # 实例化画笔 draw = ImageDraw.Draw(img) #确认画笔在哪块画布上画# 实例化一个字体 font_path = os.path.join(settings.STATICFILES_DIRS[0],'fonts/ADOBEARABIC-BOLD.OTF') #确认字体路径 font_size = 30 #确认字体大小 font = ImageFont.truetype(font_path,font_size) #将字体传入到画布上
# 在画布上生成四个随机字母 source = 'qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPASDFGHJKLZXCVBNM' res = '' for i in range(4): code_color = get_random_color() index = random.randint(0,len(source)) my_str = source[index] res += my_str draw.text((20+30*i,20),my_str,fill=code_color,font=font) # 将字母画在画布上
# 在画布上随机生成200个颜色位置不确定的点 for i in range(200): x = random.randint(0,149) y = random.randint(0,69) draw.point((x,y),fill=get_random_color())
# 将生成的画布以二进制数据保存到内存中，并指定格式 buf = BytesIO() img.save(buf,'png') del draw #删除保存后的画布 # 保存到session，为了下一步可以取出作比较 req.session['verify_code'] = res return HttpResponse(buf.getvalue(),content_type='image/png') #以图片形式返回保存在内存中的值
get_confirm_code用到的工具类函数如下：
import randomdef get_random_color(): r = random.randint(0,256) g = random.randint(0,256) b = random.randint(0,256) return (r,g,b)
包含验证码的验证页面
def login(req):
if req.method == 'GET':
return render(req,'login.html')
else:
code = req.POST.get('code')
server_code = req.session.get('verify_code')
if code and len(code)>0 and code.lower() == server_code.lower():
return HttpResponse('ok')
else:
return HttpResponse('no ok')
前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function () {
$('#myimg').click(function () {
$(this).attr('src',"/app/get_confirm_code/"+Math.random())
})
})
</script>
</head>
<body>
<form action="/app/login/" method="post">
<img src="/app/get_confirm_code/" alt="" id="myimg"><br>
<input type="text" name="code" placeholder="请输入验证码"><br>
<input type="submit" value="验证">
</form>
</body>
</html>