2018-07-03-django-20-图形验证码

图形验证码

有一个生成验证码的接口

1. 要有画布
2. 再有画笔
3. 还要有字体
4. 前提已安装Pillow

1 验证码接口

#-----utils\captcha\captcha.py--------

# coding=utf-8
from random import randint, choice
from PIL import Image, ImageDraw, ImageFont
from io import StringIO,BytesIO
from string import printable


def create_captcha():
    font_path = "utils/captcha/font/Arial.ttf"
    font_color = (randint(150, 200), randint(0, 150), randint(0, 150))
    line_color = (randint(0, 150), randint(0, 150), randint(150, 200))
    point_color = (randint(0, 150), randint(50, 150), randint(150, 200))
    width, height = 100, 40
    
    #画布
    image = Image.new('RGB', (width, height), (200, 200, 200))
    #画笔
    draw = ImageDraw.Draw(image)
    #字体
    font = ImageFont.truetype(font_path, height - 10)

    # 生成4位验证码
    text = ''.join([choice(printable[:62]) for i in range(4)])
    # 把验证码写到画布上
    draw.text((10, 10), text, font=font, fill=font_color)
    # 绘制线条
    for i in range(0, 5):
        draw.line(((randint(0, width), randint(0, height)),
                   (randint(0, width), randint(0, height))),
                  fill=line_color, width=2)
    # 绘制点
    for i in range(randint(100, 1000)):
        draw.point((randint(0, width), randint(0, height)), fill=point_color)
    # 输出
    # image不是一个HttpResponse可以识别的对象
    # 因此我们需要将image变成一个数据流才能放到HttpResponse上
    out = BytesIO() #BytesIO：相当于一个管道，可以用来存储字节流的
    image.save(out, format='jpeg')
    content = out.getvalue()
    out.close()

    print('图型验证码', text)
    return text, content

2 视图函数

#----views.py------
from django.http import HttpResponse
from utils.captcha.captcha import create_captcha


def img_captcha(request):
    """03图形验证码"""
    text,image = create_captcha()


    request.session['captchar'] = text
    # 将图形验证码存储在session中
    request.session.set_expiry(10)
    #设置验证码过期时间为10s
    return HttpResponse(image,content_type='image/png')

3 js文件

//---static\js\auth.js

$(function(){
    var imgCaptcha = $('.img-captcha');
    imgCaptcha.click(function () {
        // 如何实现点击一次图片，刷新一次验证码呢？
        // 在这里利用img的src特点，只要你修改了一次src,img就会重新加载
        imgCaptcha.attr("src",'/account/img_captcha'+"?random="+Math.random());
    });
});

// $(function(){});相当于window.function(){}
//等到页面加载完再执行function

4 html页面

<!--templates\auth\register.html-->
<img src="{% url 'account:img_captcha'%}" alt="" class="img-captcha input-group-addon"
                style="cursor: pointer;">