【插拔式】自定义图片验证码（开源）

1：第一种自定义验证码（推荐）

前端:   <img id ="img"  src="/路由/"> <span {{ dict.error }}</span>
前端js刷新验证码：
<script>
    img =document.getElementById("img");
    img.onclick = function () {
        img.src = img.src + "?";    #利用加？来刷新图片生成更换
    }
</script>



校验验证码函数：
if request.method == "POST":
        dict = {}           #用户返回错误信息
        # 判断验证码
        input_code = request.POST.get("code").upper() #输入的验证码
        obj = F1(request.POST)  #输入框的所有数据

        if obj.is_valid() and input_code == request.session["code"]:   ##判断输入的值是否等于注册session的验证码（生成随机码的时候已经注册到session）

            # 插入数据库,这里是删除不需要添加到数据表的key
            obj.cleaned_data.pop("again_password")
            obj.cleaned_data.pop("code")
            models.UserInfo.objects.create_user(**obj.cleaned_data)
            return redirect("/index/login/")  #返回页面
        else:
            dict["error"] = "验证码不匹配"
            return render(request,"register.html",{"obj":obj,"dict":dict})




验证码生成（直接复制到对应视图最下面）：
后端视图对应的路由 :

#验证码：
from PIL import Image, ImageDraw, ImageFont, ImageFilter
import random


#随机颜色
def random_color():
    return random.randint(0,255),random.randint(0,255),random.randint(0,255)

def code(request,width=150, height=35):
    # with open("1.png", "wb") as f:
    # 定义一个图片,并且设置参数
    img_obj = Image.new('RGB', size=(width, height), color=(255, 255, 255))  # 长宽   颜色

    # 创建画笔在画布上
    draw_obj = ImageDraw.Draw(img_obj)
    # 自定义字体
    font_obj = ImageFont.truetype('Monaco.ttf', 28)

    # 写干扰点
    for i in range(40):
        draw_obj.point([random.randint(0, width), random.randint(0, height)], fill=random_color())

    # 写干扰圆圈
    for i in range(40):
        draw_obj.point([random.randint(0, width), random.randint(0, height)], fill=random_color())
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw_obj.arc((x, y, x + 4, y + 4), 0, 90, fill=random_color())

        # 画干扰线
    for i in range(5):
        x1 = random.randint(0, width)
        y1 = random.randint(0, height)
        x2 = random.randint(0, width)
        y2 = random.randint(0, height)

        draw_obj.line((x1, y1, x2, y2), fill=random_color())

        img = img_obj.filter(ImageFilter.EDGE_ENHANCE_MORE)

    # 随机字符串
    for i in range(5):
        l = chr(random.randint(97, 122))  # 小写字母
        b = chr(random.randint(65, 90))  # 大学字母
        n = str(random.randint(0, 9))

        t = random.choice([b, l, n])

        # 在text参数设置坐标，字符串，颜色，字体
        draw_obj.text((i * 30, 0), t, fill=random_color(), font=font_obj)
        
    #放到session，并且忽略大小写
    request.session["code"] = "".join(temp).upper()

    #写入内存，显示到网页上
    f = open("1.png","rb")
    data =f.read()
    from io import BytesIO
    f1 = BytesIO()
    img_obj.save(f1,format="PNG")
    image_data = f1.getvalue()


    return HttpResponse(image_data,content_type="image/png")

2：第二种验证码（据说有BUG）博主没用过

1） 安装 django-simple-captcha：
pip install django-simple-captcha


2）注册captcha
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'captcha',
]
也可以个性化定制，在 settings.py中添加如下代码，详情参考官方文档：
# 设置 captcha 图片大小
CAPTCHA_IMAGE_SIZE = (80, 45)
# 字符个数
CAPTCHA_LENGTH = 4
# 超时(minutes)
CAPTCHA_TIMEOUT = 1



3）创建它的表
python manage.py makemigrations
python manage.py migrate


4）添加路由
urlpatterns = [
    url('admin/', admin.site.urls),
    # 图片验证码 路由
    url('captcha/', include('captcha.urls'))

]
再添加ajax刷新请求的二级路由，ajxa请求地址： captcha/refresh_captcha/
url('refresh_captcha/', views.refresh_captcha),    # 刷新验证码，ajax



5）在form文件中直接导入模块：
from captcha.fields import CaptchaField

6）在写的form类下填写生成标签：
Captcha = CaptchaField（）

7）前端设置跟其他组件一致，存放数据库：
obj.cleaned_data.pop("captcha"," ")

ps:django-simple-captcha有一些多余的功能，所以从它的源代码中提取了一部分加以修改，生成了一个简单的验证码模块。在使用django-simple-captcha时发现了一个Bug，
   该库使用HttpResponse.write(image_data)的方式返回验证码图片数据，导致验证码图片无法显示，具体原因还不清楚，
   不过换成HttpResponse(content=image_data)的方式就好了。这也是我自定义验证码功能的原因。