快捷導(dǎo)航

Flask 驗(yàn)證碼自動(dòng)生成的實(shí)現(xiàn)示例

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

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

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

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

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

處理驗(yàn)證碼

from io import BytesIO
from flask import  make_response，session
# 生成驗(yàn)證碼
def get_captcha():
    code, image = gen_captcha() #得到驗(yàn)證碼內(nèi)容
    out = BytesIO() # 操作二進(jìn)制數(shù)據(jù)，實(shí)例化
    image.save(out, 'png') # 保存驗(yàn)證碼圖片
    out.seek(0)
    resp = make_response(out.read()) #將驗(yàn)證碼圖片的bytes制作成頁(yè)面響應(yīng)結(jié)果， 具體可查看make_response這個(gè)方法
    resp.content_type = 'image/png' # 告訴頁(yè)面這個(gè)響應(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
 
# 獲取驗(yàn)證碼
@passport_bp.get('/getCaptcha')
def get_captcha():
    resp, code = index_curd.get_captcha()  #獲取圖片
    session["code"] = code # 驗(yàn)證碼結(jié)果保存到session或者數(shù)據(jù)庫(kù)中，這里保存在session
    return resp # 返回圖片結(jié)果

html頁(yè)面展示

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秒自動(dòng)切換
            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
        }, 30 * 1000);
    })
</script>

在這里插入圖片描述

到此這篇關(guān)于Flask 驗(yàn)證碼自動(dòng)生成的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Flask 驗(yàn)證碼自動(dòng)生成內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: