1.生成图片 pillow
1.生成图片的模块pillow,在python中安装pillow,在Django中使用时用PIL 2. 在页面上
2.后端处理
1.生成一个图片对象:from PIL import Image
# 获取随机颜色的函数 def get_random_color(): return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255) def new(mode, size, color=0) 有三个参数 img_obj=Image.new( 'RGB', (220,35) 图片大小 get_random_color() 返回的是元祖(255,15,22) 图片颜色 )
2.生成的图片放在磁盘或加载到内存
1.将生成的图片保存到磁盘上: with open("s10.png","wb") as f: img_obj.save(f,"png") with open("s10.png","rb") as f: data=f.read()2.将生成的图片在内存中加载from io import BytesIOio_obj=BytesIO()# 将生成的图片数据保存在io对象中img_obj.save(io_obj,'png')# 从io对象里面取上一步保存的数据data=io_obj.getvalue()3.将生成的图片返回到页面return HttpResponse(data)
3.在图片上添加文本
from PIL import Image, ImageDraw, ImageFontdraw_obj = ImageDraw.Draw(img_obj) # 生成一个图片画笔对象# # 加载字体文件, 得到一个字体对象,路径从项目的根目录下找font_obj = ImageFont.truetype("static/font/kumo.ttf", 28)##生成的字符串写到图片上draw_obj.text(x,y,l,m) x为写的位置,tmp写的文本,fill文本颜色,font文本字体draw_obj.text((20 , 0), "python", fill=(5, 55, 4), font=font_obj)
4.验证码
for i in range(6): u = chr(random.randint(65, 90)) # 生成大写字母 m = chr(random.randint(97, 122)) # 生成小写字母 l = random.randint(0, 9) tmp = random.choice([u, m, l]) tmp_list += str(tmp) print(tmp_list)
5.加干扰先和干扰点
加干扰线width = 220 # 图片宽度(防止越界)height = 35for i in range(5): x1 = random.randint(0, width) x2 = random.randint(0, width) y1 = random.randint(0, height) y2 = random.randint(0, height) draw_obj.line((x1, y1, x2, y2), fill=get_random_color())# 加干扰点for i in range(40): draw_obj.point((random.randint(0, width), random.randint(0, height)), fill=get_random_color()) x = random.randint(0, width) y = random.randint(0, height) draw_obj.arc((x, y, x+4, y+4), 0, 90, fill=get_random_color())
6.验证码校验
1.当用户在页面上输入验证码提交后,后台要进行验证。验证码是在get_code函数中生成的而校验实在login函数中执行的,因此需要将验证码设置为全局变量VALID_CODE=""def get_code(): global VALID_CODE VALID_CODE =tmp_list2.在校验时应不区分大小写: valid_code = request.POST.get("valid_code") # 获取用户填写的验证码 if valid_code.upper()==VALID_CODE.upper():pass随机生成的验证码如何在后端保存 1. 保存在全局变量 不行 相当于所有的请求都共用一个验证码 2. 每一个请求使用一个自己生成的验证码3.保存到session中request.session["valid_code"]=tmp_list校验时:验证码不能为空if valid_code and valid_code.upper()==request.session.get("valid_code","").upper():pass
7.刷新验证码
1.原理:在页面上打开一个图片,使用jquery操作iEle=document.getElementById("i1)iEle.src 获得图片的网址链接给其赋个新值:iEle.src="http://www.xxsbxn"页面不刷新,但图片更改2.刷新验证码:在src的值后面加上?,每次点击图片相当于更换图片链接 // 点击验证码图片 刷新验证码 $("#valid-img").click(function () { $(this)[0].src += "?"; })
登陆页面代码
''''''
''' def login(request): # if request.is_ajax(): # 如果是AJAX请求 if request.method == "POST": # 初始化一个给AJAX返回的数据 ret = { "status": 0, "msg": ""} # 从提交过来的数据中 取到用户名和密码 username = request.POST.get("username") pwd = request.POST.get("password") valid_code = request.POST.get("valid_code") # 获取用户填写的验证码 print(valid_code) print("用户输入的验证码".center(120, "=")) if valid_code and valid_code.upper() == request.session.get("valid_code", "").upper(): # 验证码正确 # 利用auth模块做用户名和密码的校验 user = auth.authenticate(username=username, password=pwd) if user: # 用户名密码正确 # 给用户做登录 auth.login(request, user) ret["msg"] = "/index/" else: # 用户名密码错误 ret["status"] = 1 ret["msg"] = "用户名或密码错误!" else: ret["status"] = 1 ret["msg"] = "验证码错误" return JsonResponse(ret) return render(request, "login.html")'''