pythonweb框架Flask實現(xiàn)圖形驗證碼及驗證碼的動態(tài)刷新實例-創(chuàng)新互聯(lián)

本篇文章給大家整理的是關(guān)于python web框架Flask實現(xiàn)圖形驗證碼的相關(guān)知識點，有需要的朋友們參考下。下列代碼都是以自己的項目實例講述的，相關(guān)的文本內(nèi)容很少，主要說明全在代碼注釋中：

10多年專注成都網(wǎng)站制作，成都定制網(wǎng)頁設(shè)計，個人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)頁設(shè)計,高端網(wǎng)頁制作,對成都被動防護網(wǎng)等多個行業(yè)，擁有多年的營銷推廣經(jīng)驗。

自制圖形驗證碼

這里所說的圖形驗證碼都是自制的圖形，通過畫布、畫筆、畫筆字體的顏色繪制而成的。將驗證碼封裝成一個類比較好管理，代碼里有絕對詳細的注釋，當然大家可以直接復(fù)制。

里面涉及的字體都是從系統(tǒng)電腦上自帶的，大家直接復(fù)制當前目錄下就可以了。

主目錄/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

 # 構(gòu)建一個驗證碼源文本
 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

一般圖形驗證碼都是在表單中，這樣短時間內(nèi)的數(shù)據(jù)及建議保存在redis緩存中（用戶點擊動態(tài)刷新圖形驗證碼）。首先我們繪制圖形驗證碼保存到項目的目錄下（入口文件是主目錄（項目目錄）app.py文件，圖片也保存到主目錄下），然后通過url地址訪問自制的圖形驗證碼（這里我只添加主要的代碼）顯示圖形驗證碼

主目錄/common/views.py

@bp.route("/captcha")
def graph_captcha():
 """
 使用定義好的圖形驗證碼類，來制作驗證碼
 以驗證碼為鍵、驗證碼為值（為了用戶的體驗，讓其忽略大小寫）存儲在redis緩存中
 通過BytesIO字節(jié)流的方式保存和訪問圖片
 :return: 圖片響應(yīng)
 """
 # 獲取驗證碼
 text, image = Captcha.gene_graph_captcha()
 cpcache.set(text.lower(), text.lower())

 # BytesIO:字節(jié)流
 out = BytesIO()
 # 保存圖片
 image.save(out, "png")
 # 存儲完圖片，將文件的指針指向文件頭，使下次保存圖片能覆蓋前面保存的圖片，節(jié)省空間
 out.seek(0)
 # 訪問圖片，并將其作為一個響應(yīng)返回給前臺
 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再次訪問就可以，但是這樣做是非常麻煩的，這里我很難解釋（很難?。。。?，大家就直接復(fù)制代碼吧，這個代碼就是點擊圖片生成一個新的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;
 }
};

對應(yīng)html的js文件就需要實現(xiàn)元素（圖片）點擊刷新圖片，調(diào)用上面的變量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);
 });
});

以上就是本次介紹的關(guān)于python web框架Flask實現(xiàn)圖形驗證碼全部知識點內(nèi)容，覺得文章還不錯的話不妨點個贊，有任何建議或看法歡迎大家在評論區(qū)分享討論！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標題：pythonweb框架Flask實現(xiàn)圖形驗證碼及驗證碼的動態(tài)刷新實例-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://muchs.cn/article46/eiceg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化、電子商務(wù)、網(wǎng)站策劃、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)