安装图片处理模块pillow : pip install pillow
pillow官网:http://pillow.readthedocs.io/en/latest/
在views.py添加视图
#验证码 from django.http import HttpResponse def verifyCode(request): # 引入绘图模块 from PIL import Image, ImageDraw, ImageFont # 引入随机函数模块 import random # 定义变量,用于画面的背景色、宽、高 bgcolor = (random.randrange(20, 100), random.randrange( 20, 100), 255) width = 100 height = 25 # 创建画面对象 im = Image.new('RGB', (width, height), bgcolor) # 创建画笔对象 draw = ImageDraw.Draw(im) # 调用画笔的point()函数绘制噪点 for i in range(0, 100): xy = (random.randrange(0, width), random.randrange(0, height)) fill = (random.randrange(0, 255), 255, random.randrange(0, 255)) draw.point(xy, fill=fill) # 定义验证码的备选值 str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0' # 随机选取4个值作为验证码 rand_str = '' for i in range(0, 4): rand_str += str1[random.randrange(0, len(str1))] # 构造字体对象 font = ImageFont.truetype('Arial.ttf', 23) # 构造字体颜色 fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255)) # 绘制4个字 draw.text((5, 2), rand_str[0], font=font, fill=fontcolor) draw.text((25, 2), rand_str[1], font=font, fill=fontcolor) draw.text((50, 2), rand_str[2], font=font, fill=fontcolor) draw.text((75, 2), rand_str[3], font=font, fill=fontcolor) # 释放画笔 del draw # 存入session,用于做进一步验证 request.session['verifycode'] = rand_str # 内存文件操作 #import cStringIO python 2的用法 #buf = cStringIO.StringIO() #buf = io.StringIO() import io #从Python 3.0开始,StringIO和cStringIO模块已经取消。通过import io模块代替 buf = io.BytesIO() # 将图片保存在内存中,文件类型为png im.save(buf, 'png') # 将内存中的图片数据返回给客户端,MIME类型为图片png return HttpResponse(buf.getvalue(), 'image/png')
若报错OSError cannot open resource 没有此字体
可以去自己的python目录下搜索ttf 然后替换为自己的绝对路径 例:C:/Users/Administrator/font/Arial.ttf
效果
========================================================================================
配置url
path('verifyCode/',views.verifyCode)
页面显示验证码 src指向验证码url
<img id='verifyCode/' src="/verifyCode/" alt="CheckCode"/>
- 扩展:点击“看不清,换一个”时,可以换一个新的验证码
<script type="text/javascript" src="/static/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $('#verifycodeChange').css('cursor','pointer').click(function() { $('#verifyCode').attr('src',$('#verifyCode').attr('src')+1) }); }); </script> <img id='verifyCode' src="/verifyCode/?1" alt="CheckCode"/> <span id='verifycodeChange'>看不清,换一个</span>
- 为了能够实现提交功能,需要增加form和input标签
<form method='post' action='/verifycodeValid/'>
{%csrf_token%} <input type="text" name="vc"> <img id='verifyCode' src="/verifyCode/?1" alt="CheckCode"/> <span id='verifycodeChange'>看不清,换一个</span> <br> <input type="submit" value="提交"> </form>验证
- 接收请求的信息,与session中的内容对比
from django.http import HttpResponse def verifycodeValid(request): vc = request.POST['vc'] if vc.upper() == request.session['verifycode']: return HttpResponse('ok') else: return HttpResponse('no')
- 接收请求的信息,与session中的内容对比
- 配置验证处理的url
urlpatterns = [
path('verifycodeValid/',views.verifycodeValid),
]
若报错403
在模板中,在表单Form里需要有{%csrf_token%}(模板网址标记在每个邮局形式的内部目标)。