建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網營銷解決方案
pythonweb框架Flask實現(xiàn)圖形驗證碼及驗證碼的動態(tài)刷新實例
本篇文章給大家整理的是關于python web框架Flask實現(xiàn)圖形驗證碼的相關知識點，有需要的朋友們參考下。下列代碼都是以自己的項目實例講述的，相關的文本內容很少，主要說明全在代碼注釋中：
成都創(chuàng)新互聯(lián)網站建設由有經驗的網站設計師、開發(fā)人員和項目經理組成的專業(yè)建站團隊，負責網站視覺設計、用戶體驗優(yōu)化、交互設計和前端開發(fā)等方面的工作，以確保網站外觀精美、網站建設、成都網站設計易于使用并且具有良好的響應性。
自制圖形驗證碼
這里所說的圖形驗證碼都是自制的圖形，通過畫布、畫筆、畫筆字體的顏色繪制而成的。將驗證碼封裝成一個類比較好管理，代碼里有絕對詳細的注釋，當然大家可以直接復制。
里面涉及的字體都是從系統(tǒng)電腦上自帶的，大家直接復制當前目錄下就可以了。
主目錄/utils/captcha/__init__.py
import random
import string
# Image:一個畫布
# ImageDraw:一個畫筆
# ImageFont:畫筆的字體
from PIL import Image, ImageDraw, ImageFont
# Captcha驗證碼
class Captcha(object):
# 生成4位數(shù)的驗證碼
numbers = 4
# 驗證碼圖片的寬度和高度
size = (100, 30)
# 驗證碼字體大小
fontsize = 25
# 加入干擾線的條數(shù)
line_number = 2
# 構建一個驗證碼源文本
SOURCE = list(string.ascii_letters)
for index in range(0, 10):
SOURCE.append(str(index))
# 用來繪制干擾線
@classmethod
def __gene_line(cls, draw, width, height):
begin = (random.randint(0, width), random.randint(0, height))
end = (random.randint(0, width), random.randint(0, height))
draw.line([begin, end], fill=cls.__gene_random_color(), width=2)
# 用來繪制干擾點
@classmethod
def __gene_points(cls, draw, point_chance, width, height):
# 大小限在【0， 100】中
chance = min(100, max(0, int(point_chance)))
for w in range(width):
for h in range(height):
tmp = random.randint(0, 100)
if tmp > 100 - chance:
draw.point((w, h), fill=cls.__gene_random_color())
# 生成隨機顏色
@classmethod
def __gene_random_color(cls, start=0, end=255):
random.seed()
return (random.randint(start, end),
random.randint(start, end),
random.randint(start, end))
# 隨機選擇一個字體
@classmethod
def __gene_random_font(cls):
fonts = [
"PAPYRUS.TTF",
"CENTAUR.TTF",
"Inkfree.ttf",
"verdana.ttf",
]
font = random.choice(fonts)
return "utils/captcha/"+font
# 用來隨機生成一個字符串（包括英文和數(shù)字）
@classmethod
def gene_text(cls, numbers):
# numbers是生成驗證碼的位數(shù)
return " ".join(random.sample(cls.SOURCE, numbers))
# 生成驗證碼
@classmethod
def gene_graph_captcha(cls):
# 驗證碼圖片的寬高
width, height = cls.size
# 創(chuàng)建圖片
image = Image.new("RGBA", (width, height), cls.__gene_random_color(0, 100))
# 驗證碼的字體
font = ImageFont.truetype(cls.__gene_random_font(), cls.fontsize)
# 創(chuàng)建畫筆
draw = ImageDraw.Draw(image)
# 生成字符串
text = cls.gene_text(cls.numbers)
# 獲取字體的尺寸
font_width, font_height = font.getsize(text)
# 填充字符串
draw.text(((width-font_width)/2, (height-font_height)/2),
text, font=font, fill=cls.__gene_random_color(150, 255))
# 繪制干擾線
for x in range(0, cls.line_number):
cls.__gene_line(draw, width, height)
# 繪制干擾點
cls.__gene_points(draw, 10, width, height)
with open("captcha.png", "wb") as fp:
image.save(fp)
return text, image
一般圖形驗證碼都是在表單中，這樣短時間內的數(shù)據(jù)及建議保存在redis緩存中（用戶點擊動態(tài)刷新圖形驗證碼）。首先我們繪制圖形驗證碼保存到項目的目錄下（入口文件是主目錄（項目目錄）app.py文件，圖片也保存到主目錄下），然后通過url地址訪問自制的圖形驗證碼（這里我只添加主要的代碼）顯示圖形驗證碼
主目錄/common/views.py
@bp.route("/captcha")
def graph_captcha():
"""
使用定義好的圖形驗證碼類，來制作驗證碼
以驗證碼為鍵、驗證碼為值（為了用戶的體驗，讓其忽略大小寫）存儲在redis緩存中
通過BytesIO字節(jié)流的方式保存和訪問圖片
:return: 圖片響應
"""
# 獲取驗證碼
text, image = Captcha.gene_graph_captcha()
cpcache.set(text.lower(), text.lower())
# BytesIO:字節(jié)流
out = BytesIO()
# 保存圖片
image.save(out, "png")
# 存儲完圖片，將文件的指針指向文件頭，使下次保存圖片能覆蓋前面保存的圖片，節(jié)省空間
out.seek(0)
# 訪問圖片，并將其作為一個響應返回給前臺
resp = make_response(out.read())
resp.content_type = "image/png"
return resp
前端頁面的代碼如下：
無非就是再生成一張圖形驗證碼，通過url再次訪問就可以，但是這樣做是非常麻煩的，這里我很難解釋（很難！！！），大家就直接復制代碼吧，這個代碼就是點擊圖片生成一個新的url訪問圖片動態(tài)刷新驗證碼
這個文件放在公共的目錄下就可以了
var cpparam = {
setParam: function(href, key, value){
//重新加載整個頁面
var isReplaced = false;
var urlArray = href.split("?");
if(urlArray.length > 1){
var queryArray = urlArray[1].split("&");
for(var i=0; i < queryArray.length; i++){
var paramArray = queryArray[i].split("=");
if(paramArray[0] == key){
paramArray[1] = value;
queryArray[i] = paramArray.join("=");
isReplaced = true;
break;
}
}
if(!isReplaced){
var params = {};
params[key] = value;
if(urlArray.length > 1){
href = href + "$" + $.param(params);
}else{
href = href + "?" + $.param(params);
}
}else{
var params = queryArray.join("&");
urlArray[1] = params;
href = urlArray.join("?");
}
}else{
var param = {};
param[key] = value;
if(urlArray.length > 1){
href = href + "$" + $.param(param);
}else{
href = href + "?" + $.param(param);
}
}
return href;
}
};
對應html的js文件就需要實現(xiàn)元素（圖片）點擊刷新圖片，調用上面的變量cpparam生成一章圖片并訪問。
$(function(){
$("#captcha-img").on("click", function(){
var self = $(this);
var src = self.attr("src");
var newsrc = cpparam.setParam(src, "xx", Math.random());
self.attr("src", newsrc);
});
});
以上就是本次介紹的關于python web框架Flask實現(xiàn)圖形驗證碼全部知識點內容，覺得文章還不錯的話不妨點個贊，有任何建議或看法歡迎大家在評論區(qū)分享討論！
網站標題：pythonweb框架Flask實現(xiàn)圖形驗證碼及驗證碼的動態(tài)刷新實例
網頁地址：http://www.ef60e0e.cn/article/iispgj.html
