快捷導(dǎo)航

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

更新時(shí)間：2022年05月17日 14:31:20 作者：費(fèi)弗里

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

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

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

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ā)運(yùn)行環(huán)境就準(zhǔn)備好了~，接下來只需要在本文附件解壓后的根目錄執(zhí)行python app.py，接著訪問本機(jī)的127.0.0.1:8050網(wǎng)址即可使用我們的應(yīng)用。

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

因?yàn)槭褂玫?code>amazing-qr這個(gè)庫來進(jìn)行常規(guī)二維碼或自定義底圖二維碼的生成，為了方便在應(yīng)用中快速調(diào)用，我們可以對(duì)其進(jìn)行簡單封裝，由于amazing-qr在指定底圖素材時(shí)不能設(shè)置目錄，只能使用當(dāng)前工作目錄中的圖片，因此我們需要在生成圖片前切換工作目錄到素材所在的目錄，并在生成二維碼結(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（動(dòng)態(tài)底圖），默認(rèn)為default
????:param?words:?二維碼需要嵌入的信息
????:param?version:?邊長大小，取值在1到40之間，越大圖片越精細(xì)
????:param?level:?糾錯(cuò)水平，可選的有L、M、Q、H，從左往右越大越精準(zhǔn)
????:param?picture_dir:?底圖文件的絕對(duì)路徑
????:param?picture:?底圖文件名
????:param?contrast:?對(duì)比度，取值在0到1之間
????:param?brightness:?亮度，取值在0到1之間
????:param?save_name:?導(dǎo)出文件名
????:param?save_dir:?導(dǎo)出文件絕對(duì)路徑
????: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ǔ)上，下面進(jìn)入我們的重點(diǎn)——搭建網(wǎng)頁應(yīng)用，得益于dash中構(gòu)建交互式網(wǎng)頁應(yīng)用的簡單性和極高的自由度（遠(yuǎn)高于streamlit等玩具庫），配合我的開源組件庫框架fac（https://github.com/CNFeffery/feffery-antd-components）中近百種具有不同功能的組件，你可以利用它們快速構(gòu)建出具有各種常見功能的網(wǎng)頁應(yīng)用。

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

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