快捷導航

基于Python實現(xiàn)在線二維碼生成工具

更新時間：2022年05月17日 14:31:20 作者：費弗里

這篇文章將為大家展示如何通過純Python編程的方式，開發(fā)出一個網(wǎng)頁應(yīng)用—基于輸入的網(wǎng)址等文字內(nèi)容實現(xiàn)二維碼的生成，感興趣的可以學習一下

在今天的教程中，費老師我將為大家展示如何通過純Python編程的方式，開發(fā)出一個網(wǎng)頁應(yīng)用，從而幫助用戶直接通過瀏覽器訪問，即可基于輸入的網(wǎng)址等文字內(nèi)容，完成常規(guī)二維碼、靜態(tài)底圖二維碼以及動圖底圖二維碼的快捷生成，先來看一看應(yīng)用的主要功能操作演示：

只寫Python開發(fā)這樣精致的工具應(yīng)用非常簡單，下面我來帶大家從搭建環(huán)境開始，學習整個過程：

1.環(huán)境搭建

首先我們來創(chuàng)建應(yīng)用的虛擬開發(fā)環(huán)境，建議使用Conda，命令如下：

創(chuàng)建虛擬環(huán)境并激活

conda?create?-n?dash-qr-generator?python=3.8?-c?https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/?-y

conda?activate?dash-qr-generator

安裝相關(guān)依賴

為了可以純Python快速開發(fā)我們的應(yīng)用，我們需要安裝dash及我的開源組件庫feffery-antd-components，另外還需要安裝用于二維碼生成的第三方庫amazing-qr，全部安裝命令如下：

pip?install?dash?feffery-antd-components?amzqr

全部執(zhí)行完成后我們的應(yīng)用開發(fā)運行環(huán)境就準備好了~，接下來只需要在本文附件解壓后的根目錄執(zhí)行python app.py，接著訪問本機的127.0.0.1:8050網(wǎng)址即可使用我們的應(yīng)用。

2.二維碼生成功能的封裝

因為使用到amazing-qr這個庫來進行常規(guī)二維碼或自定義底圖二維碼的生成，為了方便在應(yīng)用中快速調(diào)用，我們可以對其進行簡單封裝，由于amazing-qr在指定底圖素材時不能設(shè)置目錄，只能使用當前工作目錄中的圖片，因此我們需要在生成圖片前切換工作目錄到素材所在的目錄，并在生成二維碼結(jié)束后還原先前的工作目錄：

utils.py

import?os
from?amzqr?import?amzqr
from?pathlib?import?Path

def?generate_qr(mode:?str?=?'default',
????????????????words:?str?=?None,
????????????????version:?int?=?None,
????????????????level:?str?=?None,
????????????????picture_dir:?str?=?None,
????????????????picture:?str?=?None,
????????????????contrast:?float?=?None,
????????????????brightness:?float?=?None,
????????????????save_name:?str?=?None,
????????????????save_dir:?str?=?None):
????'''
????用于控制二維碼圖片的生成
????:param?mode:?模式，可選的有default（常規(guī)二維碼static（靜態(tài)底圖）和motion（動態(tài)底圖），默認為default
????:param?words:?二維碼需要嵌入的信息
????:param?version:?邊長大小，取值在1到40之間，越大圖片越精細
????:param?level:?糾錯水平，可選的有L、M、Q、H，從左往右越大越精準
????:param?picture_dir:?底圖文件的絕對路徑
????:param?picture:?底圖文件名
????:param?contrast:?對比度，取值在0到1之間
????:param?brightness:?亮度，取值在0到1之間
????:param?save_name:?導出文件名
????:param?save_dir:?導出文件絕對路徑
????:return:
????'''

????#?mode:?default
????if?mode?==?'default':

????????_?=?amzqr.run(
????????????words=words,
????????????version=version,
????????????level=level,
????????????save_name=save_name,
????????????save_dir=save_dir
????????)

????#?mode:?static?|?motion
????elif?mode?==?'static'?or?mode?==?'motion':

????????origin?=?Path().absolute()

????????os.chdir(Path('caches',?picture_dir))

????????_?=?amzqr.run(
????????????words=words,
????????????version=version,
????????????level=level,
????????????picture=picture,
????????????colorized=True,
????????????contrast=contrast,
????????????brightness=brightness,
????????????save_name=save_name,
????????????save_dir=os.getcwd()
????????)

????????os.chdir(origin)

3.網(wǎng)頁應(yīng)用的搭建

在前面二維碼生成函數(shù)編寫完成的基礎(chǔ)上，下面進入我們的重點——搭建網(wǎng)頁應(yīng)用，得益于dash中構(gòu)建交互式網(wǎng)頁應(yīng)用的簡單性和極高的自由度（遠高于streamlit等玩具庫），配合我的開源組件庫框架fac（https://github.com/CNFeffery/feffery-antd-components）中近百種具有不同功能的組件，你可以利用它們快速構(gòu)建出具有各種常見功能的網(wǎng)頁應(yīng)用。

在我們的“在線二維碼圖片生成器”中，通過頂部AntdRadioGroup()構(gòu)建的單選按鈕在三種模式中進行切換，從而通過回調(diào)函數(shù)影響下面操作區(qū)所渲染出的各個表單輸入類組件，如文字輸入框AntdInput()、滑動輸入框AntdSlider()、下拉選擇AntdSelect()等：

尤其是當用戶切換到“靜態(tài)底圖”和“動態(tài)底圖”模式時，由于需要用戶上傳提供底圖素材，因此額外會渲染出圖片上傳組件AntdPictureUpload()，它在“靜態(tài)底圖”模式下還具有圖片縮放、裁切編輯功能，只需要一個參數(shù)editable=True即可實現(xiàn)：