Python 学习之生成图形验证码
一、 如何生成图形验证码？
新建一个captcha 的python 文件包，在__init__.py 文件中写入生成图形验证码的代码，将字体文件也放入这个文件包中 。
import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter
import string
class Captcha(object):
# 生成几位的验证码
number = 4
# 验证码图片的宽度和高度
size = (110, 38)
# 验证码字体的大小
fontsize = 25
# 加入干扰线的条数
line_number = 2
# 构建一个验证码源文本
source = list(string.ascii_letters)
source.extend(map(lambda x: str(x), range(10)))
# 用户绘制干扰线
@classmethod
def _gene_line(cls, draw, width, height):
begin = (random.randint(0, width), random.randint(0, height))
end = (random.randint(0, width), random.randint(0, height))
draw.line([begin, end], fill=cls._gene_random_color(), width=2)
# 用于绘制干扰点
@classmethod
# cls, draw, point_chance, width, height
def _gene_points(cls, draw, width, height, rate):
# chance = min(100, max(0, int(point_chance))) #大小限制在0-100
# for w in range(width):
# for h in range(height):
# tmp = random.randint(0, 100)
# if tmp > chance:
# draw.point((w, h), fill=cls._gene_random_color())
# 因为width为图形验证码的宽，height为图形验证码的高，整个图都是由点组成的
# 点的x坐标范围：[0, 图形的宽度], y的坐标范围：[0, 图形的高度], 这样就能遍历图像的每一个像素点
# rate 用来控制点生成的概率，大约100个点有rate个点被选中
# point方法用来画点，参数1：点的坐标， 参数2：点的颜色
for x in range(width):
for y in range(height):
if random.randint(1, 100) <= rate:
draw.point((x, y), fill=cls._gene_random_color())
# 随机生成颜色
@classmethod
def _gene_random_color(cls, start=0, end=255):
random.seed()
return (random.randint(start, end), random.randint(start, end), random.randint(start, end))
# 随机选择一个字体
@classmethod
def _gene_random_font(cls):
fonts = [
"AlimamaShuHeiTi-Bold.ttf",
"AlimamaDaoLiTi.ttf",
"AlimamaDongFangDaKai-Regular.ttf",
]
font = random.choice(fonts)
return f"utils/captcha/{font}"
# 随机生成一个字符串（包括英文和数字）
@classmethod
def gene_text(cls, number):
return ''.join(random.sample(cls.source, number))
# 生成验证码
@classmethod
def gene_graph_captcha(cls):
# 验证码图片的宽和高
width, height = cls.size
# 创建图片
image = Image.new('RGBA', (width, height), cls._gene_random_color(0, 100))
# 验证码字体
font = ImageFont.truetype(cls._gene_random_font(), cls.fontsize)
# 创建画笔
draw = ImageDraw.Draw(image)
# 生成字符串
text = cls.gene_text(cls.number)
# font.getsize(text)获取字体的尺寸
# pillow 版本10 会报这个错误， AttributeError: 'FreeTypeFont' object has no attribute 'getsize'
# 降低版本为9.5,但是安装一直报Read timed out,所以直接取消掉
# font_width, font_height = font.getsize(text)
# 填充字符串
draw.text((30, 5), text, font=font,
fill=cls._gene_random_color(150, 255))
# 绘制干扰线
for x in range(0, cls.line_number):
cls._gene_line(draw, width, height)
# 绘制噪点
cls._gene_points(draw, width, height, 20)
with open('utils/captcha/captcha.png', 'wb') as fp:
image.save(fp)
return text, image
# if __name__ == '__main__':
# Captcha.gene_graph_captcha()
二、 后端如何将图形验证码传给前端？
from utils.captcha import Captcha
from io import BytesIO
from flask import Blueprint, make_response
bp = Blueprint('common', __name__, url_prefix='/common')
@bp.route('/graph_captcha/')
def graph_captcha():
# 获取验证码
text, image = Captcha.gene_graph_captcha()
# BytesIO 二进制流数据
out = BytesIO()
# 将image 指定保存在out 二进制流里面
image.save(out, 'PNG')
# 由于添加了图片数据进去，指针会指向文件流最后，所以需要将文件流指针指到0，跟操作文件类似
out.seek(0)
resp = make_response(out.read())
resp.content_type = "image/png"
cache.set(text.lower(), text.lower())
return resp三、 前端如何使用后端传递过来的图形验证码？
<div class="mb-3 input-group">
<input class="form-control" type="text" name="graph_code" placeholder="图形验证码">
<span id="graph_captcha_box" class="input-group-text graph_captcha_box">
<img id="graph_captcha" src="{{ url_for('common.graph_captcha') }}" alt="">
</span>
</div>window.onload = function () {
let graph_captcha_box = document.getElementById('graph_captcha_box')
let graph_captcha = document.getElementById('graph_captcha')
graph_captcha_box.addEventListener('click', function () {
let timeStamps = new Date().getTime();
graph_captcha.src = `/common/graph_captcha/?timeStamps=${timeStamps}`
})
}