python web框架Flask实现图形验证码及验证码的动态刷新实例

2023-08-11 21:18:05 364

下列代码都是以自己的项目实例讲述的，相关的文本内容很少，主要说明全在代码注释中

自制图形验证码

这里所说的图形验证码都是自制的图形，通过画布、画笔、画笔字体的颜色绘制而成的。将验证码封装成一个类比较好管理，代码里有绝对详细的注释，当然大家可以直接复制。

里面涉及的字体都是从系统电脑上自带的，大家直接复制当前目录下就可以了。

主目录/utils/captcha/__init__.py

importrandom
importstring

#Image:一个画布
#ImageDraw:一个画笔
#ImageFont:画笔的字体
fromPILimportImage,ImageDraw,ImageFont


#Captcha验证码
classCaptcha(object):
#生成4位数的验证码
numbers=4
#验证码图片的宽度和高度
size=(100,30)
#验证码字体大小
fontsize=25
#加入干扰线的条数
line_number=2

#构建一个验证码源文本
SOURCE=list(string.ascii_letters)
forindexinrange(0,10):
SOURCE.append(str(index))

#用来绘制干扰线
@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
def__gene_points(cls,draw,point_chance,width,height):
#大小限在【0，100】中
chance=min(100,max(0,int(point_chance)))
forwinrange(width):
forhinrange(height):
tmp=random.randint(0,100)
iftmp>100-chance:
draw.point((w,h),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=[
"PAPYRUS.TTF",
"CENTAUR.TTF",
"Inkfree.ttf",
"verdana.ttf",
]
font=random.choice(fonts)
return"utils/captcha/"+font

#用来随机生成一个字符串（包括英文和数字）
@classmethod
defgene_text(cls,numbers):
#numbers是生成验证码的位数
return"".join(random.sample(cls.SOURCE,numbers))

#生成验证码
@classmethod
defgene_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.numbers)
#获取字体的尺寸
font_width,font_height=font.getsize(text)
#填充字符串
draw.text(((width-font_width)/2,(height-font_height)/2),
text,font=font,fill=cls.__gene_random_color(150,255))
#绘制干扰线
forxinrange(0,cls.line_number):
cls.__gene_line(draw,width,height)
#绘制干扰点
cls.__gene_points(draw,10,width,height)
withopen("captcha.png","wb")asfp:
image.save(fp)
returntext,image

显示图形验证码

一般图形验证码都是在表单中，这样短时间内的数据及建议保存在redis缓存中（用户点击动态刷新图形验证码）。首先我们绘制图形验证码保存到项目的目录下（入口文件是主目录（项目目录）app.py文件，图片也保存到主目录下），然后通过url地址访问自制的图形验证码（这里我只添加主要的代码）

主目录/common/views.py

@bp.route("/captcha")
defgraph_captcha():
"""
使用定义好的图形验证码类，来制作验证码
以验证码为键、验证码为值（为了用户的体验，让其忽略大小写）存储在redis缓存中
通过BytesIO字节流的方式保存和访问图片
:return:图片响应
"""
#获取验证码
text,image=Captcha.gene_graph_captcha()
cpcache.set(text.lower(),text.lower())

#BytesIO:字节流
out=BytesIO()
#保存图片
image.save(out,"png")
#存储完图片，将文件的指针指向文件头，使下次保存图片能覆盖前面保存的图片，节省空间
out.seek(0)
#访问图片，并将其作为一个响应返回给前台
resp=make_response(out.read())
resp.content_type="image/png"
returnresp

前端页面的代码如下：

动态刷新验证码

无非就是再生成一张图形验证码，通过url再次访问就可以，但是这样做是非常麻烦的，这里我很难解释（很难！！！），大家就直接复制代码吧，这个代码就是点击图片生成一个新的url访问图片

这个文件放在公共的目录下就可以了

varcpparam={
setParam:function(href,key,value){
//重新加载整个页面
varisReplaced=false;
varurlArray=href.split("?");
if(urlArray.length>1){
varqueryArray=urlArray[1].split("&");
for(vari=0;i1){
href=href+"$"+$.param(params);
}else{
href=href+"?"+$.param(params);
}
}else{
varparams=queryArray.join("&");
urlArray[1]=params;
href=urlArray.join("?");
}
}else{
varparam={};
param[key]=value;
if(urlArray.length>1){
href=href+"$"+$.param(param);
}else{
href=href+"?"+$.param(param);
}
}
returnhref;
}
};

对应html的js文件就需要实现元素（图片）点击刷新图片，调用上面的变量cpparam生成一章图片并访问。

$(function(){
$("#captcha-img").on("click",function(){
varself=$(this);
varsrc=self.attr("src");
varnewsrc=cpparam.setParam(src,"xx",Math.random());
self.attr("src",newsrc);
});
});

以上就是本次介绍的关于pythonweb框架Flask实现图形验证码全部知识点内容，感谢大家的学习和对毛票票的支持。

python web框架Flask实现图形验证码及验证码的动态刷新实例

热门推荐

随机推荐