图片验证码+前、后端使用

生成图片验证码

1 获得一个画布

2 实例化一个画笔

3 实例化字体

4 使用画笔 画对应的字符

5 保存验证码图片

6 将生成的四个随机字符 写入session 留着验证用

7 将图片返回给浏览器

获得随机颜色

~~~
import random

获得随机颜色

def get_random_color():
R = random.randrange(255)
G = random.randrange(255)
B = random.randrange(255)
return (R, G, B)
~~~

~~~
import random

Create your views here.

def get_verify_img(req):
# 画布背景颜色
bg_color = get_random_color()
img_size = (130, 70)
# 实例化一个画布
image = Image.new(“RGB”, img_size, bg_color)
# 实例化画笔
draw = ImageDraw.Draw(image, “RGB”)
# 设置文字的颜色
# text_color = (255, 0, 0)
# 创建字体
font_path = “/home/liuda/gz1083/codes/day07/static/fonts/ADOBEARABIC-BOLDITALIC.OTF”
# 实例化字体 并指定大小是30
font = ImageFont.truetype(font_path, 30)
#准备源字符集
source = “abcdefghijklmnopqrstJHHKJLHKHATQWERTYUIOPXCVBNM

图片验证码的使用

后端逻辑

~
def login_api(req):
if req.method == 'GET':
return render(req, 'login.html')
else:
params = req.POST
# 用户输入的
code = params.get("verify_code")
# 从session获取的
server_code = req.session.get("code")
# 做判断比较
if server_code.lower() == code.lower():
return HttpResponse("ok")
else:
return HttpResponse("fail")
~

前端

~~~




Title

{%csrf_token%}

#给图片添加点击事件 $("#code").click(function () { #修改 图片的src属性$(this).attr("src", "/t7/verify_img" + Math.random()); })

~~~