django配置图片验证码

先在dev.py中注册app：

INSTALLED_APPS = [

    'verify.apps.VerifyConfig'
]

配置redis数据库：

'default': {
        'BACKEND': 'django_redis.cache.RedisCache',
        'LOCATION': 'redis://127.0.0.1:6379/5',
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        },
    },
    'session': {
        'BACKEND': 'django_redis.cache.RedisCache',
        'LOCATION': 'redis://127.0.0.1:6379/6',
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        },
    },

}

配置urls.py:

from django.conf.urls import url,include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'',include('verify.urls'))
]

在终端中导入verify app：

python ../../manage.py startapp verify

成功后配置verify/urls.py

from django.conf.urls import url
from .import views
urlpatterns = [
    url(r'^pic_code/(.+)/',views.ImgCodeView.as_view())
] ----拼接验证码图片

配置verify/app.py

from django.apps import AppConfig


class VerifyConfig(AppConfig):
    name = 'verify'

修改register.html：

<p>
                   <div class="fl res-text">验证码：</div>
                   <div class="fl"><input type="password" class="loginuser2"></div>
                   <div class="fl same-code">获取验证码</div>
                    <img src="http://127.0.0.1:8000/pic_code/uuid" id="img_code" onclick="getImgCode()">
                   <!--<div class="fl same-code2">60秒后重新获取</div>-->
                </p>
            

在js下新建一个register.js，写入：

function uuid() {

    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";

    var uuid = s.join("");
    console.log(uuid);
    return uuid;

}
function getImgCode(){
    current_uuid = uuid()
    new_url = "http://127.0.0.1:8000/pic_code/"+ current_uuid
    $('#img_code').attr('src',new_url)

    }
$(document).ready(function(){
    getImgCode()
})

修改verify/views.py:

from django.shortcuts import render,HttpResponse
from django.views import View
from django.http import HttpResponse
from PIL import Image, ImageDraw, ImageFont
from django.utils.six import BytesIO
from django_redis import get_redis_connection
from rest_framework.views import APIView

...



class ImgCodeView( View):
    def get(self,request,uuid):
        print(uuid)
        import random
        # 定义变量，用于画面的背景色、宽、高
        bgcolor = (random.randrange(20, 100), random.randrange(
            20, 100), 255)
        width = 100
        height = 25
        # 创建画面对象
        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))]
        # 构造字体对象，ubuntu的字体路径为“/usr/share/fonts/truetype/freefont”
        font = ImageFont.truetype('FreeMono.ttf', 23)
        # 构造字体颜色
        fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
        # 绘制4个字
        draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
        draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
        draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
        draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
        # 释放画笔
        del draw
        # 存入session，用于做进一步验证
        request.session['verifycode'] = rand_str
        # 内存文件操作
        buf = BytesIO()
        # 将图片保存在内存中，文件类型为png
        im.save(buf, 'png')
        # 将内存中的图片数据返回给客户端，MIME类型为图片png
        con = get_redis_connection()
        con.setex(name=uuid, time=300, value=rand_str)
        return HttpResponse(buf.getvalue(), 'image/png')

            # 引入随机函数模块

终端中启动前端服务器：

(huanjing1) python@ubuntu:~/Desktop/new_project/shanghui$ live-server

浏览器中输入：http://127.0.0.1:42997/register.html