0
点赞
收藏
分享

微信扫一扫

图片验证码的出现以及使用

迪莉娅1979 2022-02-02 阅读 40

一:后端代码

a. 安装pillow模块

pip3 install pillow -i https://pypi.douban.com/simple/

b. 把下列字体文件下载下来,放到根目录(一定要根目录,因为我函数封装的路径,从根目录找的)

字体文件icon-default.png?t=M0H8https://pan.baidu.com/s/1FRSdn23s_ADD3mLMjaxdVg         提取码:1211 

ps:也可以自己找一个字体文件,在image_code进行配置

a. 字体文件,ttf格式就行,

c. 路由urls.py 

# 1. 创建一个路由 
    # 验证码图片
    url(r'^image/code/$', account.image_code, name='image_code'),

d. 视图views.py

# 2. 创建一个view视图 

# 验证码
from utils.image_code import check_code
from io import BytesIO

def image_code(request):
    """ 生成图片验证码 """

    image_object, code = check_code()

    request.session['image_code'] = code
    request.session.set_expiry(60)  # 主动修改session的过期时间为60s

    stream = BytesIO()
    image_object.save(stream, 'png')
    return HttpResponse(stream.getvalue())

e. 创建一个utils文件夹,创建一个py文件  image_code.py

#!/usr/bin/env python
# -*- coding:utf-8 -*-
from PIL import Image, ImageDraw, ImageFont, ImageFilter
import random

# Monaco.ttf 字体文件 放在根目录下,没有会报错
def check_code(width=120, height=30, char_length=5, font_file='Monaco.ttf', font_size=28):
    code = []
    img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255))
    draw = ImageDraw.Draw(img, mode='RGB')

    def rndChar():
        """
        生成随机字母
        :return:
        """
        return chr(random.randint(65, 90))

    def rndColor():
        """
        生成随机颜色
        :return:
        """
        return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))

    # 写文字
    font = ImageFont.truetype(font_file, font_size)
    for i in range(char_length):
        char = rndChar()
        code.append(char)
        h = random.randint(0, 4)
        draw.text([i * width / char_length, h], char, font=font, fill=rndColor())

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

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

    # 画干扰线
    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.line((x1, y1, x2, y2), fill=rndColor())

    img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)
    return img, ''.join(code)


if __name__ == '__main__':
    image_object, code = check_code()

    # 把图片写入文件
    """
    with open('code.png', 'wb') as f:
        image_object.save(f, format='png')
    """

    # 把图片的内容写到内存 stream
    """
    from io import BytesIO
    stream = BytesIO()
    image_object.save(stream, 'png')
    stream.getvalue()
    """

f. 前端生成使用

<div class="col-xs-5">
<img src="{% url 'image_code' %}" alt="" id="clickImg">
</div>

g. 前端搭配点击刷新(需要导入JQ,我这边没有导入)

<script>
        // 点击验证码刷新
        $(function () {
            clickImgBtn();
        })

        function clickImgBtn() {
            $('#clickImg').click(function () {
                var oldSrc = $(this).attr('src')
                $(this).attr('src', oldSrc + '?')
            })
        }
    </script>
举报

相关推荐

0 条评论