整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
上回，上次和大家簡單的介紹了下web驗證碼實現，也說了異步刷新驗證碼的實現邏輯，不過有些小伙伴還是建議我實現下，廢話少說，上代碼：此代碼是需要依賴：sanic==19.9.0Pillow==7.0.0
篇文章給大家整理的是關于python web框架Flask實現圖形驗證碼的相關知識點，有需要的朋友們參考下。下列代碼都是以自己的項目實例講述的，相關的文本內容很少，主要說明全在代碼注釋中：
自制圖形驗證碼
這里所說的圖形驗證碼都是自制的圖形，通過畫布、畫筆、畫筆字體的顏色繪制而成的。將驗證碼封裝成一個類比較好管理，代碼里有絕對詳細的注釋，當然大家可以直接復制。
里面涉及的字體都是從系統電腦上自帶的，大家直接復制當前目錄下就可以了。
主目錄/utils/captcha/__init__.py
import random
import string
# Image:一個畫布
# ImageDraw:一個畫筆
# ImageFont:畫筆的字體
from PIL import Image, ImageDraw, ImageFont
# Captcha驗證碼
class Captcha(object):
# 生成4位數的驗證碼
numbers = 4
# 驗證碼圖片的寬度和高度
size = (100, 30)
# 驗證碼字體大小
fontsize = 25
# 加入干擾線的條數
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
# 用來隨機生成一個字符串（包括英文和數字）
@classmethod
def gene_text(cls, numbers):
# numbers是生成驗證碼的位數
return " ".join(random.sample(cls.SOURCE, numbers))
# 生成驗證碼
@classmethod
def gene_graph_captcha(cls):
# 驗證碼圖片的寬高
width, height = cls.size
# 創建圖片
image = Image.new("RGBA", (width, height), cls.__gene_random_color(0, 100))
# 驗證碼的字體
font = ImageFont.truetype(cls.__gene_random_font(), cls.fontsize)
# 創建畫筆
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
一般圖形驗證碼都是在表單中，這樣短時間內的數據及建議保存在redis緩存中（用戶點擊動態刷新圖形驗證碼）。首先我們繪制圖形驗證碼保存到項目的目錄下（入口文件是主目錄（項目目錄）app.py文件，圖片也保存到主目錄下），然后通過url地址訪問自制的圖形驗證碼（這里我只添加主要的代碼）顯示圖形驗證碼
主目錄/common/views.py
@bp.route("/captcha")
def graph_captcha():
"""
使用定義好的圖形驗證碼類，來制作驗證碼
以驗證碼為鍵、驗證碼為值（為了用戶的體驗，讓其忽略大小寫）存儲在redis緩存中
通過BytesIO字節流的方式保存和訪問圖片
:return: 圖片響應
"""
# 獲取驗證碼
text, image = Captcha.gene_graph_captcha()
cpcache.set(text.lower(), text.lower())
# BytesIO:字節流
out = BytesIO()
# 保存圖片
image.save(out, "png")
# 存儲完圖片，將文件的指針指向文件頭，使下次保存圖片能覆蓋前面保存的圖片，節省空間
out.seek(0)
# 訪問圖片，并將其作為一個響應返回給前臺
resp = make_response(out.read())
resp.content_type = "image/png"
return resp
前端頁面的代碼如下：
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="graph_captcha" placeholder="圖形驗證碼">
<span class="input-group-addon captcha-addon">
<img id="captcha-img" class="captcha-img" src="{{ url_for("common.graph_captcha") }}" alt="">
</span>
</div>
</div>
無非就是再生成一張圖形驗證碼，通過url再次訪問就可以，但是這樣做是非常麻煩的，這里我很難解釋（很難！！！），大家就直接復制代碼吧，這個代碼就是點擊圖片生成一個新的url訪問圖片動態刷新驗證碼
這個文件放在公共的目錄下就可以了
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文件就需要實現元素（圖片）點擊刷新圖片，調用上面的變量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實現圖形驗證碼全部知識點內容，覺得文章還不錯的話不妨點個贊，有任何建議或看法歡迎大家在評論區分享討論！
我是一名python開發工程師，整理了一套python的學習資料，如果你想提升自己，對編程感興趣，關注我并在后臺私信小編：“08”即可免費領取資料！希望對你能有所幫助！
是個發送驗證碼時常用的功能，當用戶點擊【發送驗證碼】之后出現【重新獲取60s后】。在倒計時期間禁止用戶繼續發送驗證碼，待倒計時結束之后才可以再次發送驗證碼。這個可以避免重復發送請求獲取多個驗證碼信息（但是只有最后一次才是有效的），你也不知道自己發送了幾次請求，當手機接收到驗證碼之后容易誤以為是正確的驗證碼。所以做適當的控制是非常有必要的，同時也可以防止惡意發送請求消耗服務器資源。
為了方便這里我們用ElementUI來實現，在el-form-item中利用el-button按鈕來實現驗證碼發送。發送驗證碼之后直接在el-button上修改現實中在HTML中的【發送驗證碼】內容，利用disabled屬性來控制el-button的是否可以點擊。
定義一個retrieve()方法開啟倒計時功能，利用setInterval計時器每隔一秒鐘調用一次函數，當倒計時結束時通過clearInterval()來關閉計時器。這里我們需要做的是刷新時間和重定義el-button中的HTML內容，disable是用來控制el-button按鈕是否可點擊的屬性。注意：disabled屬性別用this.$refs.onConfirm.disbaled=true來定義，會報警告的：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "disabled"。
在發送之前我們需要對表單中的數據進行校驗，這里為什么要嵌套兩個validateField呢（validateField支持校驗組數）？。因為validateField校驗子表單數據時每校驗一個值都會返回校驗結果，當校驗不通過時Error返回值為校驗的提示信息，當通過時Error的值為空，所以我們在if語句中用(！Error）表示校驗通過。那么這就存在一個問題如果校驗數組的話就會進行多次校驗，也就會發送多次驗證請求。（點一次請求卻收到多條驗證碼這顯然是不合理的！）
這里主要的就是retrieve()方法的定義和動態改變HTML內容，可以利用Vue提供的$ref來快速的定位DOM元素實現屬性的修改。以上內容是小編給大家分享的【Vue實戰088：簡單的驗證碼倒計時功能實現】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄：
為了方便學習，下面附上本文用到的源碼：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
