Django之随机图形验证码

时间：2021-09-26 22:17:30

实现效果：点击右边图片验证码会变

Django之随机图形验证码

Django之随机图形验证码

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 += '?')

    });

相关文章