需求概述
一般登錄頁面或者其他頁面都需要驗證碼的功能,那在Django中如何實現呢?
這基本就需要用到第三方模塊了:pillow
還需要兩個文件,一個是字體文件:Monaco.ttf,另一個是一個模塊:check_code.py,還有一個是導入io模塊,我們先來看下check_code.py的代碼:
#!/usr/bin/env python
#coding:utf-8
import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter
_letter_cases = "abcdefghjkmnpqrstuvwxy" # 小寫字母，去除可能干擾的i，l，o，z
_upper_cases = _letter_cases.upper() # 大寫字母
_numbers = ''.join(map(str, range(3, 10))) # 數字
init_chars = ''.join((_letter_cases, _upper_cases, _numbers))
def create_validate_code(size=(120, 30),
chars=init_chars,
img_type="GIF",
mode="RGB",
bg_color=(255, 255, 255),
fg_color=(0, 0, 255),
font_size=18,
font_type="Monaco.ttf",
length=4,
draw_lines=True,
n_line=(1, 2),
draw_points=True,
point_chance = 2):
'''
@todo: 生成驗證碼圖片
@param size: 圖片的大小，格式（寬，高），默認為(120, 30)
@param chars: 允許的字符集合，格式字符串
@param img_type: 圖片保存的格式，默認為GIF，可選的為GIF，JPEG，TIFF，PNG
@param mode: 圖片模式，默認為RGB
@param bg_color: 背景顏色，默認為白色
@param fg_color: 前景色，驗證碼字符顏色，默認為藍色#0000FF
@param font_size: 驗證碼字體大小
@param font_type: 驗證碼字體，默認為 ae_AlArabiya.ttf
@param length: 驗證碼字符個數
@param draw_lines: 是否划干擾線
@param n_lines: 干擾線的條數范圍，格式元組，默認為(1, 2)，只有draw_lines為True時有效
@param draw_points: 是否畫干擾點
@param point_chance: 干擾點出現的概率，大小范圍[0, 100]
@return: [0]: PIL Image實例
@return: [1]: 驗證碼圖片中的字符串
'''
width, height = size # 寬， 高
img = Image.new(mode, size, bg_color) # 創建圖形
draw = ImageDraw.Draw(img) # 創建畫筆
def get_chars():
'''生成給定長度的字符串，返回列表格式'''
return random.sample(chars, length)
def create_lines():
'''繪制干擾線'''
line_num = random.randint(*n_line) # 干擾線條數
for i in range(line_num):
# 起始點
begin = (random.randint(0, size[0]), random.randint(0, size[1]))
#結束點
end = (random.randint(0, size[0]), random.randint(0, size[1]))
draw.line([begin, end], fill=(0, 0, 0))
def create_points():
'''繪制干擾點'''
chance = min(100, max(0, int(point_chance))) # 大小限制在[0, 100]
for w in range(width):
for h in range(height):
tmp = random.randint(0, 100)
if tmp > 100 - chance:
draw.point((w, h), fill=(0, 0, 0))
def create_strs():
'''繪制驗證碼字符'''
c_chars = get_chars()
strs = ' %s ' % ' '.join(c_chars) # 每個字符前后以空格隔開
font = ImageFont.truetype(font_type, font_size)
font_width, font_height = font.getsize(strs)
draw.text(((width - font_width) / 3, (height - font_height) / 3),
strs, font=font, fill=fg_color)
return ''.join(c_chars)
if draw_lines:
create_lines()
if draw_points:
create_points()
strs = create_strs()
# 圖形扭曲參數
params = [1 - float(random.randint(1, 2)) / 100,
0,
0,
0,
1 - float(random.randint(1, 10)) / 100,
float(random.randint(1, 2)) / 500,
0.001,
float(random.randint(1, 2)) / 500
]
img = img.transform(size, Image.PERSPECTIVE, params) # 創建扭曲
img = img.filter(ImageFilter.EDGE_ENHANCE_MORE) # 濾鏡，邊界加強（閾值更大）
return img, strs
這邊有下載地址:點我點我
文件位置:
代碼
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="/login/" method="POST">
<input type="text" name="username" />
<input type="text" name="pwd" />
<input type="text" name="check_code" />
{# /* src為圖片的后台地址 */#}
<img src="/check_code/" onclick="ChangeCode(this);">
<input type="submit" />
</form>
<script>
// 點擊一次,更改圖片內容,
function ChangeCode(ths){
ths.src = ths.src + '?';
}
</script>
</body>
</html>
views.py文件:
def check_code(request):
import io
from backend import check_code as CheckCode
stream = io.BytesIO()
# img圖片對象,code在圖像中寫的內容
img, code = CheckCode.create_validate_code()
img.save(stream, "png")
# 圖片頁面中顯示,立即把session中的CheckCode更改為目前的隨機字符串值
request.session["CheckCode"] = code
return HttpResponse(stream.getvalue())
# 代碼：生成一張圖片，在圖片中寫文件
# request.session['CheckCode'] = 圖片上的內容
# 自動生成圖片，並且將圖片中的文字保存在session中
# 將圖片內容返回給用戶
def login(request):
if request.method == 'POST':
input_code = request.POST.get('check_code')
print(input_code.upper(),request.session['CheckCode'].upper())
return render(request, 'login.html')