Django之图形验证码

Django之图形验证码

目录

  • Django之图形验证码
    • 【1】静态图片
    • 【2】视图层绑定静态文件
    • 【3】PIL生成图片(固定背景)
    • 【4】将图片存储在内存
    • 【5】生成文本信息
    • 【6】实现图片刷新

【1】静态图片

最基础的生成图片就是获取静态文件

<div style="margin-left: 10px;">
    <img src="{% static 'img/img.png' %}" width="100%" height="37px">
</div>

image-20240315161835853

【2】视图层绑定静态文件

# urls.py
path('get_verify_img/', views.get_verify_img, name='get_verify_img'),
# views.py
import os
from django.conf import settings

def get_verify_img(request):
    img_path = os.path.join(settings.BASE_DIR, 'Blog/static/img/img3.png')
    with open(img_path, 'rb') as f:
        data = f.read()
    return HttpResponse(data)
<img src="{% url 'Blog:get_verify_img' %}" width="100%" height="37px">

image-20240315175632902

【3】PIL生成图片(固定背景)

安装Pillow模块

pip install Pillow

导入

from PIL import Image, ImageDraw, ImageFont

# Image:负责生成图片数据
# ImageDraw:在生成的图片上面添加相应数据
# ImageFont:添加相应数据时指定字体样式、大小、间距
from PIL import Image, ImageDraw, ImageFont

def get_verify_img(request):
    # 图片名称
    img_name = 'verify.png'

    # 指定图像模式
    mode = 'RGB'
    # 指定图像尺寸
    size = (123, 37)
    # 指定图像颜色(颜色名或三原色盘)
    color = 'blue'
	
    # 创建图片对象
    img_obj = Image.new(mode=mode, size=size, color=color)

    # 设置图片保存路径
    img_path = os.path.join(settings.BASE_DIR, 'Blog/static/img', img_name)
    # 保存图片
    img_obj.save(img_path)
	
	# 读取图片
    with open(img_path, 'rb') as f:
        data = f.read()
    return HttpResponse(data)

image-20240315193050165

【4】将图片存储在内存

要将数据临时存储在内存需要借助Python的IO模块

from io import BytesIO, StringIO
# BytesIO:负责临时存储数据
# StringIO:负责取出数据

顺便把随机颜色做了

def random_rgb():
    return random.randint(0, 256), random.randint(0, 256), random.randint(0, 256)
def get_verify_img(request):
    img_name = 'verify.png'

    # 指定图像模式
    mode = 'RGB'
    # 指定图像尺寸
    size = (123, 37)
    # 随机生成图像颜色
    color = random_rgb()

    img_obj = Image.new(mode=mode, size=size, color=color)

    # 创建存储内存空间
    io_obj = BytesIO()
    
    # 保存图片并指定后缀
    img_obj.save(io_obj, 'png')
    
    # 取出图片
    data = io_obj.getvalue()

    return HttpResponse(data)

【5】生成文本信息

先生成一个随机的五位数文本

def random_word():
    # 0-9数字
    random_num = random.randint(0, 9)
    # a-z
    random_lower = chr(random.randint(97, 122))
    # A-Z
    random_upper = chr(random.randint(65, 90))
    word = random.choice([random_upper, random_lower, str(random_num)])
    return word
def get_verify_img(request):
    img_name = 'verify.png'

    # 指定图像模式
    mode = 'RGB'
    # 指定图像尺寸
    size = (123, 50)
    # 随机生成图像颜色
    color = random_rgb()

    img_obj = Image.new(mode=mode, size=size, color=color)

    # 创建画笔对象
    img_draw = ImageDraw.Draw(img_obj)
    
    # 设置字体和大小
    img_font = ImageFont.truetype('Blog/static/font/TianShiBaoDiaoTiJian-1.ttf', 34)

    code = ''
    for i in range(0, 4):
        word = random_word()
        # text依次放入参数(坐标,文本内容,字体颜色,字体样式)
        img_draw.text((i * 15 + 20, 4), word, random_rgb(), img_font)
        code += word

        # 创建存储内存空间
        io_obj = BytesIO()
        
        # 保存图片并指定后缀
        img_obj.save(io_obj, 'png')
        
        # 取出图片
        data = io_obj.getvalue()
    return HttpResponse(data)

实例效果

image-20240315221303849

【6】实现图片刷新

首先需要知道刷新图片的原理

当这种验证图片数据在开发者模式中将它的末尾添加?并加入任意数字后按下回车他就会自动变换

http://127.0.0.1:8000/Blog/get_verify_img/

image-20240315220940213

image-20240315221005599

<img src="{% url 'Blog:get_verify_img' %}" width="100%"
	height="37px" id="img_verify" alt="">

<script>
     const verify = document.getElementById('img_verify')
    verify.addEventListener('click', function () {
        // 获取原始的 src 属性值
        const verify_src = verify.src;
        // 检查原始 src 是否已经包含时间戳
        if (verify_src.includes('?')) {
            // 如果已经包含时间戳,只替换最后一个时间戳
            verify.src = verify_src.replace(/\?.*$/, '') + '?' + new Date().getTime();
        } else {
            // 如果原始 src 没有时间戳,直接添加时间戳
            verify.src = verify_src + '?' + new Date().getTime();
        }
    })
</script>

后端将生成图片验证码拆分到新的文件

import random

from PIL import Image, ImageDraw, ImageFont
from io import BytesIO, StringIO


def random_rgb():
    return random.randint(0, 256), random.randint(0, 256), random.randint(0, 256)


def random_word():
    # 0-9数字
    random_num = random.randint(0, 9)
    # a-z
    random_lower = chr(random.randint(97, 122))
    # A-Z
    random_upper = chr(random.randint(65, 90))
    word = random.choice([random_upper, random_lower, str(random_num)])
    return word


def verify():
    img_name = 'verify.png'
    data = None
    # 指定图像模式
    mode = 'RGB'
    # 指定图像尺寸
    size = (100, 50)
    # 随机生成图像颜色
    color = random_rgb()

    img_obj = Image.new(mode=mode, size=size, color=color)

    img_draw = ImageDraw.Draw(img_obj)
    img_font = ImageFont.truetype('Blog/static/font/TianShiBaoDiaoTiJian-1.ttf', 35)

    code = ''
    words = ''
    for i in range(0, 4):
        word = random_word()
        # text依次放入参数(坐标,文本内容,字体颜色,字体样式)
        img_draw.text((i * 15 + 20, 4), word, random_rgb(), img_font)
        code += word

        # 创建存储内存空间
        io_obj = BytesIO()

        # 保存图片并指定后缀
        img_obj.save(io_obj, 'png')

        # 取出图片
        data = io_obj.getvalue()

        words += word
    print(words)
    # 返回图片数据,验证码文本
    return data,words

视图层代码

# 文件路径自定义
from lib.verify_img.verify import verify

def get_verify_img(request):
    data, words = verify()
    print(words)
    return HttpResponse(data)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/460135.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

idea+vim+pycharm的块选择快捷键

平时开发的时候&#xff0c;有的时候我们想用矩形框住代码&#xff0c;或者想在某列上插入相同字符 例如下图所示&#xff0c;我想在22-24行的前面插入0000 1. Idea的快捷键&#xff1a;option 鼠标 2. Pycharm的快捷键&#xff1a;shift option 鼠标 2. Vim 块选择 v/V/c…

Python读取Excel工作表数据写入CSV、XML、文本

Excel工作簿是常用的表格格式&#xff0c;许多数据呈现、数据分析和数据汇报都是以Excel工作表的形式进行。然而&#xff0c;在实际的数据管理、分析或自动化流程构建过程中&#xff0c;我们常常需要将这些Excel中的数据迁移至更其他数据系统&#xff0c;或者以文本形式存储以便…

AI日报:欧盟人工智能法案通过后行业面临合规障碍

文章目录 人工智能新规对web爬网的影响对英国的影响。 人工智能新规 立法者已经通过了欧盟人工智能法案。企业现在必须确保其人工智能应用程序符合规则。 全面的新规定对可能影响公民权利的人工智能系统实施制裁&#xff0c;并有可能彻底禁止某些系统。 违反规定的公司可能面…

4、鸿蒙学习-@ohos.promptAction (弹窗)

创建并显示文本提示框、对话框和操作菜单。 说明 本模块首批接口从API version 9开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 该模块不支持在UIAbility的文件声明处使用&#xff0c;即不能在UIAbility的生命周期中调用&#xff0c;需要在创建…

音频占用磁盘空间太多 需要把mp3音频转aac音频缩小占用空间 应该怎么操作?

一&#xff1a;什么是aac格式&#xff1f; aac是一种音频压缩格式&#xff0c;它是MPEG-2标准下的一种音频压缩方式&#xff0c;也可以作为HE-AAC&#xff0c;AAC或AAC-LC格式使用&#xff0c;是音频压缩领域中的一种重要格式。与MP3的比较&#xff0c;aac在保证音质的同时可以…

C++类与对象二

目录 一、类的嵌套 二、对象引用私有数据成员 通过公有函数为私有成员赋值 利用指针访问私有数据成员 利用函数访问私有数据成员 利用引用访问私有数据成员 三、成员函数重载 四、this指针 一、类的嵌套 #include <iostream> using namespace std;class CC1 { p…

Tomcat会话保持

文章目录 Tomcat会话保持1、代理服务器配置2、web服务器配置3、会话保持3.1 方法一&#xff1a;修改代理服务器配置&#xff08;nginx&#xff09;3.2 方法二&#xff1a;修改web服务器配置&#xff08;tomcat&#xff09;访问官方文档&#xff0c;查看需要添加的配置文件修改t…

C++STL栈与队列的实现

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…

【Streamlit学习笔记】实现包含多个sheet的excel文件下载

1、什么是Streamlit Streamlit是一个免费的开源框架&#xff0c;用于快速构建和共享漂亮的机器学习和数据科学Web应用程序&#xff0c;官网链接 Streamlit Streamlit API链接 API reference 实际项目中遇到的问题&#xff1a;包含多个sheet的excel文件下载&#xff0c;下面将给…

STM32初识2

复位和时钟控制&#xff08;RCC&#xff1a;reset clock control&#xff09; 系统复位 当发生以下任一事件时&#xff0c;产生一个系统复位&#xff1a; 1. NRST 引脚上的低电平 ( 外部复位 ) 2. 窗口看门狗计数终止 (WWDG 复位 ) 3. 独立看门狗计数终止 (IWDG 复位 ) …

【JAVA基础】API:Math、System、runtime、object、BigInteger 、BigDecima、爬虫、分组、时间类、包装类

1.Math 2.System public class Main {public static void main(String[] args) {int[] arr {1, 2, 3, 4, 5, 6, 7, 8};int[] arr1 new int[8];System.arraycopy(arr,0,arr1,1,5); // 从1970.1.1开始到现在的毫秒形式long l1 System.currentTimeMillis();//171046475…

HandyControl PropertyGrid及自定义编辑器

前提条件 项目引入对应HandyControl对应版本包。 使用案例 UI部分 <Window xmlns:hc"https://handyorg.github.io/handycontrol"><hc:TabControl><hc:TabItem Header"默认样式"><hc:PropertyGrid Width"380" SelectedO…

huawei services HK华为云服务

huaweiserviceshk是一种云计算服务&#xff0c;为华为云服务用户提供了多种服务&#xff0c;包括云服务器、数据库、存储、网络等&#xff0c;用户可以根据自己的需求选择不同的服务并支付相应的费用 如何付费呢&#xff0c;这里可以使用441112&#xff0c;点击获取 卡片信息在…

swiftUI中的可变属性和封装

swiftUI的可变属性 关于swift中的属性&#xff0c;声明常量使用let &#xff0c; 声明变量使用var 如果需要在swiftUI中更改视图变化那么就需要在 var前面加上state 。 通过挂载到state列表 &#xff0c;从而让xcode找到对应的改变的值 例子&#xff1a; import SwiftUIstruc…

前端组件化:构建高效应用的艺术

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

点的基本操作

点的基本操作 要求 提供空间点数据文本文件&#xff0c;包含ID、name、X、Y四个字段信息&#xff0c; 1&#xff09;读取数据&#xff0c;并且在窗口中显示点的具体位置&#xff0c;用实心圆绘制。 2&#xff09;鼠标任意点击三个点&#xff0c;将点连线&#xff0c;用黑色笔…

微服务技术栈SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式(五):分布式搜索 ES-中

文章目录 一、DSL查询文档1.1 简单查询1.2 复合查询 二、搜索结果处理三、RestClient演示 查询与结果分析四、案例4.1 问题解析4.2 代码4.2.1 实体bean4.2.2 控制层4.2.3 业务service4.2.4 启动类 一、DSL查询文档 1.1 简单查询 # 1. DSL查询 # 1.1 查询所有GET /hotel/_searc…

Github和TeamCity的持续集成构建

一、简介 TeamCity是JetBrains旗下的一款持续集成[Continuous Integration&#xff0c;简称CI]工具&#xff0c;开箱即用。TeamCity提供一系列特性可以让团队快速实现持续集成&#xff1a;IDE工具集成、各种消息通知、各种报表、项目的管理、分布式的编译等等。 二、安装使用(…

【Maven学习笔记】Maven入门教程(适合新手反复观看学习)

Maven学习笔记 Maven的简要介绍Maven的安装和配置Maven的安装Maven安装的常用配置 Maven的使用入门编写pom编写主代码编写测试代码打包和运行使用Archetype生成项目骨架 Maven核心概念的阐述坐标案例分析依赖依赖的范围传递性依赖依赖范围依赖调节可选依赖Maven依赖常用的技巧 …

关于python中数据分析的一些函数

首先先下载numpy函数库 如果使用的pycharm软件&#xff0c;可在设置中下载&#xff0c;在Python interpreter设置里&#xff0c;点击号&#xff0c;搜索numpy点击下载即可 第一部分 1.array()函数 这是一个将类似数组的数据转为数组的函数&#xff0c;我们还可以控制其数组的…