前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Django之随机图形验证码

Django之随机图形验证码

作者头像
py3study
发布2020-01-17 11:52:22
1.1K0
发布2020-01-17 11:52:22
举报
文章被收录于专栏:python3

前端代码:

代码语言:javascript
复制
<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格(只是为了美观,可以不用样式)

后端代码:

代码语言:javascript
复制
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())

现在刷新就可以刷新验证码了

还差点击验证码就能更换验证码

前端脚本代码:

这里这么写是因为只要在地址后面加上字符,那么就刷新图片

代码语言:javascript
复制
 $('#yzm_img_id').click(function () {
        var path2 = $(this).attr('src');
        $(this).attr('src', path2 += '?')
    });
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/05/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档