django项目验证码(PIL库实现)

Posted 2021-02-05 aguncn

作个记录，这个东东，是可以到处照搬的。

WINDOWS下和LINUX下，字体对象获取方式不一样。

为了用户体验，字体大小也重要的。

另外，为了照顾个别字母认不出来的人，提供刷新功能。

一，验证码函数

def verify_code(request):
    from PIL import Image, ImageDraw, ImageFont
    # 引入随机函数模块
    import random
    # 定义变量，用于画面的背景色、宽、高
    bgcolor = (random.randrange(40, 200), random.randrange(
        40, 200), 255)
    width = 200
    height = 40
    # 创建画面对象
    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))]
    # 构造字体对象，一个默认的(字体太小)，一个LINUX下的，一个WINDOWS下的。23号可以了。
    # font = ImageFont.load_default().font
    # font = ImageFont.truetype(‘/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf‘, 23)
    font = ImageFont.truetype(‘C:WindowsFontsArial.ttf‘, 23)

    # 构造字体颜色
    fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
    # 绘制4个字，要注意间距
    draw.text((20, 10), rand_str[0], font=font, fill=fontcolor)
    draw.text((70, 10), rand_str[1], font=font, fill=fontcolor)
    draw.text((120, 10), rand_str[2], font=font, fill=fontcolor)
    draw.text((170, 10), rand_str[3], font=font, fill=fontcolor)
    # 释放画笔
    del draw
    # 存入session，用于做进一步验证
    request.session[‘verify_code‘] = rand_str
    # 内存文件操作
    import io
    buf = io.BytesIO()
    # 将图片保存在内存中，文件类型为png
    im.save(buf, ‘png‘)
    # 将内存中的图片数据返回给客户端，MIME类型为图片png
    return HttpResponse(buf.getvalue(), ‘image/png‘)

 

二，前端写法

<div class="row cl">
        <label class="form-label col-xs-3"></label>
        <div class="formControls col-xs-2">
              <input type="text" name="vc" placeholder="验证码" rows="1" class="input-text size-L" required id="id_vc">
        </div>
        <div class="formControls col-xs-5">
             <img id=‘verify_code‘ src="{% url ‘verify_code‘ %}?1" alt="CheckCode"/>
            <span id=‘verify_codeChange‘>
                <i class="icon Hui-iconfont">&#xe68f;</i>
            </span>
        </div>
    </div>

<script type="text/javascript">
    $(function(){
        $(‘#verify_codeChange‘).css(‘cursor‘,‘pointer‘).click(function() {
            $(‘#verify_code‘).attr(‘src‘,$(‘#verify_code‘).attr(‘src‘)+1)
        });
    });
</script>

 

三，后台session验证

        if vc.upper() != request.session[‘verify_code‘]:
            error.append(‘验证码错误！‘)
            return render(request, "accounts/login.html", error)

 

四，样子