自定义图片验证码

自定义图片验证码

自定义图片验证码

html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}">
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">登录功能</h1>
            <form action="" id="id_form">
                {% csrf_token %}
                <div class="form-group">
                    <label for="id_username">用户名</label>
                    <input type="text" id="id_username" name="username" class="form-control">
                </div>
                <div class="form-group">
                    <label for="id_password">密码</label>
                    <input type="password" id="id_password" name="password" class="form-control">
                </div>
                <div class="form-group">
                    <label for="id_code">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="id_code" name="code" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <img src="/get_code/" alt="" width="350px" height="35px" id="id_img">
                        </div>
                    </div>
                </div>
                <div class="form-group text-center">
                    <input type="button" value="登录" class="btn btn-block btn-danger btn-group" id="id_submit">
                    <span class="text-danger error"></span>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $('#id_img').click(function (){
        // 把原来的src地址变成运来的地址
        var timestamp = new Date().getTime()
        {#alert($(this)[0].src)  // http://127.0.0.1:8000/get_code/#}
        $(this)[0].src = '/get_code/?t=' + timestamp
    })
</script>
</html>

方式一：

# 方式一：直接返回一张图片
with open('./media/avatar/a1.jpg', 'rb') as f:
    data = f.read()
    return HttpResponse(data)

方式二：

# 方式二：自己生成一张图片，返回  --->>>:借助模块，pillow
# rgb: 三原色， red green blue
# 创建图片
img = Image.new('RGB', (350, 35), (0, 255, 255))  # 图片格式，图片的宽高，图片的颜色白色
# 保存到本地
with open('code.png', 'wb') as f:
    img.save(f)
    # 打开图片，返回给前端
    with open('./code.png', 'rb') as f:
        data = f.read()
        return HttpResponse(data)

方式三：

# 方式三：把生成的图片写到内容中
# 创建图片
img = Image.new('RGB', (350, 35), (0, 255, 0))
# 保存到本地
byte_io = BytesIO()
# 保存到内存中
img.save(byte_io, 'png')  # png指定图片格式，否则报错
# 从BytesIO读取二进制，返回给前端
return HttpResponse(byte_io.getvalue())

方式四：

# 方式四：在图片上写文字
# 创建图片
img = Image.new('RGB', (350, 35), (0, 100, 100))
# 在图片上写文字，相当于画板
img_draw = ImageDraw.Draw(img)  # 画出模板
img_draw.text((0, 0), 'love jimin')
# 保存到内存中
byte_io = BytesIO()  # 先实例化一个对象
img.save(byte_io, 'png')
# 从BytesIO读取二进制，返回给前端
return HttpResponse(byte_io.getvalue())

方式五：

# 方式五：图片上写文字，字体是指定的字体，字的颜色随机
img = Image.new('RGB', (350, 35), (100, 100, 0))
# 创建一个字体对象
font = ImageFont.truetype('./static/font/xgdl.ttf', 30)  # 字体， 字体大小
# 在图片上写文字，相当于画板
img_draw = ImageDraw.Draw(img)
img_draw.text((0, 0), 'love jimin', font=font)
# 保存到内存中
byte_io = BytesIO()
img.save(byte_io, 'png')
# 从BytesIO取出二进制，返回给前端
return HttpResponse(byte_io.getvalue())

方式六：终极方案

注意：pip install pillow

from PIL import Image, ImageDraw, ImageFont  # pillow下载后导入的模块
from io import BytesIO
import random

def get_code(request):
    # 方式六：生成随机数的验证码，自定义验证码
    img = Image.new('RGB', (350, 35), (255, 255, 255))  # 图片背景色为白色
    # 创建字体对象
    font = ImageFont.truetype('./static/font/xgdl.ttf', 30)
    # 在图片上写文字，相当于画板
    img_draw = ImageDraw.Draw(img)
    # 在图片上写文字(数字，大写字母，小写字母组合 4个)
    code_str = ''
    for i in range(5):
        num = random.randint(0, 9)  # 顾头顾尾
        upper = chr(random.randint(65, 90))  # 字符编码：A~Z 65~90
        low = chr(random.randint(97, 122))
        ran = str(random.choice([num, upper, low]))
        code_str += ran  # python是强类型语言，不同类型不能直接相加，需要类型转换
        img_draw.text((60 + i * 50, 0), ran, fill=get_rgb(), font=font)  # fill给文字指定颜色
        print(code_str)
        ################重点######################
        # 一个浏览器对应一个验证码，浏览器作为唯一表示可以使用session
        request.session['code'] = code_str  # 重点，存到session中，下次从session中取出来比较
        #########################################

        # 在图片上画点划线
        width = 350
        height = 35
        for i in range(10):
            x1 = random.randint(0, width)
            x2 = random.randint(0, width)
            y1 = random.randint(0, height)
            y2 = random.randint(0, height)
            # 在图片上画线
            img_draw.line((x1, y1, x2, y2), fill=get_rgb())

            # 画点
            for i in range(50):
                img_draw.point([random.randint(0, width), random.randint(0, height)], fill=get_rgb())
                x = random.randint(0, width)
                y = random.randint(0, height)
                # 画弧形
                # img_draw.arc((x, y, x+4, y+4), 0, 90, fill=get_rgb())

                # 保存到内存
                byte_io = BytesIO()
                img.save(byte_io, 'png')
                return HttpResponse(byte_io.getvalue())

posted @ 2022-09-17 15:09 努力努力再努力~W 阅读(67) 评论(0) 收藏举报

刷新页面返回顶部

jimin☽

自定义图片验证码

自定义图片验证码

自定义图片验证码

公告