图片相关的模块
#pip3 install pillow
from PIL import Image,ImageDraw,ImageFont
"""
Image:生成图片
ImageDraw:能够在图片上乱写乱画
ImageFont:控制字体样式
"""
from io import BytesIO,StringIo
"""
内存管理器模块
BytesIO:临时帮你存储数据 返回的数据是二进制
StringIO:临时帮你存储数据 返回的数据是字符串
"""
import random
def get_random():
return random.randint(0,255),random.randint(0,255),random.randint(0,255)
#推导步骤1：直接获取后端现成的图片二进制数据发送给前端
def get_code(request):
with open(r'static/img/1.jpg','rb')as f:
data=f.read()
return HttpResponse(data)
#推导步骤2：利用pillow模块动态产生图片
def get_code(request):
# img_obj=Image.new('RGB',(400,40),'yellow')
# img_obj=Image.new('RGB',(400,40),(23,54,78))
img_obj=Image.new('RGB',(400,40),get_random())
#先将图片对象保存起来
with open('xxx.png','wb')as f:
img_obj.save(f,'png')
#在将图片对象读取出来
with open('xxx.png','rb')as f:
data=f.read()
return HttpResponse(data)
#推导步骤3 ：文件存储繁琐IO效率低 借助内存管理器模块
def get_code(request):
img_obj=Image.new('RGB',(400,40),get_random())
io_obj=BytesIO()#生成一个内存管理器对象 你可以看成是文件句柄
img_obj.save(io_obj,'png')
return HttpResponse(io_obj.getvalue())#从内存管理器中读取二进制的图片数据返回给前端
#推导步骤4:写图片验证码
# 我们的计算机上面能够输出各种各样的字体样式，内部其实对应的是一个个.ttf结尾的文件
def get_code(request):
img_obj = Image.new('RGB', (400, 40), get_random())
img_draw=ImageDraw.Draw(img_obj)#产生一个画笔对象
img_font=ImageFont.truetype('static/font/11.ttf',30)#字体样式 大小
#随机验证码 五位数随机验证码 数字 小写字母 大写字母
code=''
for i in range(5):
random_upper=chr(random.randint(65,90))
random_lower=chr(random.randint(97,122))
random_int=str(random.randint(0,9))
#从上面3个里面随机选一个
tmp=random.choice([random_upper,random_lower,random_int])
#将产生的随机字符串写入到图片上
"""
为什么一个个写不是生成好了在写
因为一个个写能够控制每个字体的间隙 而生成好之后再写没法控制字体的间距了
"""
img_draw.text((i*45+60,-1),tmp,get_random(),img_font)
#拼接随机字符串
code+=tmp
print(code)
#随机验证码在登录的视图函数里面需要用到 要比对 所有要找个地方存起来并且其他视图函数也能拿到
request.session['code']=code
io_obj=BytesIO()
img_obj.save(io_obj,'png')
return HttpResponse(io_obj.getvalue())
"""前端"""
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">登录页面</h1>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="text" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="">验证码</label>
<div class="row">
<div class="col-md-6">
<input type="text" name="code" id="is_code" class="form-control">
</div>
<div class="col-md-6">
<img src="/get_code/" alt="" id="id_img" width="400" height="40">
</div>
</div>
</div>
<input type="button" class="btn btn-success" value="登录">
</div>
</div>
</div>
<script>
$('#id_img').click(function () {
//1 先获取标签之前的src
let oldVal = $(this).attr('src');
$(this).attr('src', oldVal += '?')
})
</script>
