1. 程式人生 > >圖片驗證碼+前、後端使用

圖片驗證碼+前、後端使用

生成圖片驗證碼

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()); })


~~~