Django之随机图形验证码
前端代码:
<div class="container"> <div class="row"> <div class="col-md-6"> <label for="yzm_id">验证码:</label> <input type="text" class="form-control" id="yzm_id" placeholder="" name="yzm"> </div> <div class="col-md-6"> <img id='yzm_img_id' src="/yzm/" alt="" style="width: 260px;height: 40px"> </div> </div> <div>
一个input输入框和一个用div包裹的img标签,用Bootstrap的栅格系统各占6格(只是为了美观,可以不用样式)
后端代码:
from PIL import Image,ImageDraw,ImageFont from io import BytesIO,StringIO #色彩的设置为(*,*,*),所以随机返回三个数 def r_num(number): #number为2指的是背景颜色,把背景颜色和字体颜色分开,不然当颜色一样时,不容易看到 if number==2: return random.randint(0,128),random.randint(0,128),random.randint(0,128) #number==1指的是字体颜色,字体颜色深一些比较养眼 if number == 1: return random.randint(128, 255), random.randint(128, 255), random.randint(128, 255) def yzm(request): #创建一个Image对象,‘RGB’是颜色的模式。第二个参数是验证码的大小。第三个参数是三个随机数,当然也用英语单词指定颜色,比如red,这里为了随机性选择了用三个数字 yzm_img=Image.new("RGB",(260,40),r_num(1)) #为yzm_img对象创建一个画笔 draw=ImageDraw.Draw(yzm_img) #指定字体的格式,ttf文件自己在网上下载,放入static文件夹中,40指的是字体的大小 font=ImageFont.truetype('static/1.ttf',40) #存放验证码 code='' #循环5次,所以验证码是5位 for i in range(5): #随机0到9的数字 random_num=str(random.randint(0,9)) #随机65到90的数字,chr是把数字对比ASCLL码表转为字母。65到90是大写字母 random_up=str(chr(random.randint(65,90))) #同上,随机小写字母 random_low=str(chr(random.randint(97,122))) #从三个字符中随机选取出一个 random_code=random.choice([random_num,random_up,random_low]) #把字符写入图片。第一个参数(x,y),坐标,如果坐标位置写死,那么将会全部挤到一起,第二个参数,指定写入的字符。第三参数指定字符的格式 draw.text((45*i,-5),random_code,r_num(2),font) code+=random_code io_obj=BytesIO() #把图片存放到内存空间中 yzm_img.save(io_obj,'png') #给session中添加验证码 request.session['code']=code #返回二进制数据 return HttpResponse(io_obj.getvalue())
现在刷新就可以刷新验证码了
还差点击验证码就能更换验证码
前端脚本代码:
这里这么写是因为只要在地址后面加上字符,那么就刷新图片
$('#yzm_img_id').click(function () { var path2 = $(this).attr('src'); $(this).attr('src', path2 += '?') });
posted on 2019-04-26 13:04 与落霞齐飞12138 阅读(187) 评论(0) 编辑 收藏 举报