使用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="" >
</div>
</div>
<div>
后端代码:
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 path3 = $(this).attr('src');
$(this).attr('src', path3 += '?')
});
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。