快捷導(dǎo)航

Flask 驗證碼自動生成的實現(xiàn)示例

更新時間：2025年03月16日 11:45:28 作者：LKIDTI數(shù)據(jù)

本文主要介紹了Flask 驗證碼自動生成的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

生成圖片以及結(jié)果

from captcha.image import ImageCaptcha
 
from PIL import Image
from random import choices
 
 
def gen_captcha(content='2345689abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ'):
    """
    生成驗證碼，可自定義，這里是生成驗證碼結(jié)果，以及驗證碼文件
    """
    image = ImageCaptcha()
    # 獲取字符串
    captcha_text = "".join(choices(content, k=4)).lower()
    # 生成圖像
    captcha_image = Image.open(image.generate(captcha_text))
    return captcha_text, captcha_image

得到生成的驗證碼，進(jìn)行處理，響應(yīng)到頁面

處理驗證碼

from io import BytesIO
from flask import  make_response，session
# 生成驗證碼
def get_captcha():
    code, image = gen_captcha() #得到驗證碼內(nèi)容
    out = BytesIO() # 操作二進(jìn)制數(shù)據(jù)，實例化
    image.save(out, 'png') # 保存驗證碼圖片
    out.seek(0)
    resp = make_response(out.read()) #將驗證碼圖片的bytes制作成頁面響應(yīng)結(jié)果， 具體可查看make_response這個方法
    resp.content_type = 'image/png' # 告訴頁面這個響應(yīng)的類型
    return resp, code

制作響應(yīng)路由，使用藍(lán)圖

藍(lán)圖

from flask import Blueprint, session, redirect, url_for, render_template, request
passport_bp = Blueprint('passport', __name__, url_prefix='/passport') # 生成藍(lán)圖passport_bp
 
# 獲取驗證碼
@passport_bp.get('/getCaptcha')
def get_captcha():
    resp, code = index_curd.get_captcha()  #獲取圖片
    session["code"] = code # 驗證碼結(jié)果保存到session或者數(shù)據(jù)庫中，這里保存在session
    return resp # 返回圖片結(jié)果

html頁面展示

html展示

"""
<img src="{{ url_for('passport.get_captcha') }}" class="codeImage" id="captchaImage"/>
"""
<script> # 使用的layui框架
    layui.use(['form', 'jquery', 'layer', 'button', 'popup'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let button = layui.button;
        let popup = layui.popup;
        let captchaPath = "{{ url_for('passport.get_captcha') }}";
 
        $("#captchaImage").click(function () { # 點(diǎn)擊切換
            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
        });
        setInterval(function () { # 30秒自動切換
            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
        }, 30 * 1000);
    })
</script>

在這里插入圖片描述