使用Python開發(fā)一個(gè)簡(jiǎn)單的本地圖片服務(wù)器
你是否曾經(jīng)想過(guò),如何能方便地將在電腦上存儲(chǔ)的照片,通過(guò)手機(jī)或平板在局域網(wǎng)內(nèi)快速瀏覽?今天介紹的這個(gè) Python 腳本就能幫你輕松實(shí)現(xiàn)!它巧妙地結(jié)合了 wxPython 構(gòu)建的圖形用戶界面(GUI)和 Python 內(nèi)建的 Web 服務(wù)器功能,讓你在本地網(wǎng)絡(luò)中搭建一個(gè)私人的、即開即用的網(wǎng)頁(yè)相冊(cè)。
讓我們一起深入代碼,看看它是如何一步步實(shí)現(xiàn)的。
項(xiàng)目目標(biāo)
這個(gè)腳本的核心目標(biāo)是:
- 提供一個(gè)簡(jiǎn)單的桌面應(yīng)用程序,讓用戶可以選擇包含圖片的本地文件夾。
- 啟動(dòng)一個(gè)本地 HTTP 服務(wù)器,該服務(wù)器能生成一個(gè)展示所選文件夾內(nèi)圖片縮略圖的 HTML 頁(yè)面。
- 允許同一局域網(wǎng)內(nèi)的其他設(shè)備(如手機(jī)、平板)通過(guò)瀏覽器訪問(wèn)這個(gè) HTML 頁(yè)面。
- 提供一個(gè)具備現(xiàn)代功能的網(wǎng)頁(yè)瀏覽界面,例如圖片懶加載、點(diǎn)擊縮略圖彈出大圖預(yù)覽、以及在大圖模式下切換圖片等。
核心技術(shù)棧
Python 3: 作為主要的編程語(yǔ)言。
wxPython: 一個(gè)跨平臺(tái)的 Python GUI 工具庫(kù),用于創(chuàng)建桌面應(yīng)用程序窗口。
http.server & socketserver: Python 標(biāo)準(zhǔn)庫(kù),用于創(chuàng)建基礎(chǔ)的 HTTP Web 服務(wù)器。
threading: 用于在后臺(tái)線程中運(yùn)行 HTTP 服務(wù)器,避免阻塞 GUI 界面。
socket: 用于獲取本機(jī)的局域網(wǎng) IP 地址。
os & pathlib: 用于文件系統(tǒng)操作(列出目錄、檢查文件、獲取路徑、大小等)。pathlib 被導(dǎo)入但實(shí)際未使用,代碼主要使用了 os.path。
webbrowser: 用于在腳本啟動(dòng)服務(wù)后自動(dòng)打開默認(rèn)瀏覽器訪問(wèn)頁(yè)面。
mimetypes: 用于猜測(cè)圖片文件的 MIME 類型(如 image/jpeg),以便瀏覽器正確顯示。
HTML, CSS, JavaScript: 用于構(gòu)建用戶在瀏覽器中看到的圖片瀏覽前端界面。
代碼深度解析
讓我們逐一拆解腳本的關(guān)鍵組成部分:
1. 導(dǎo)入模塊與全局變量
import wx import os import http.server import socketserver import threading import socket import webbrowser from pathlib import Path # 導(dǎo)入但未使用 import mimetypes # 全局變量,用于存儲(chǔ)選擇的圖片文件夾路徑 selected_folder = "" server_thread = None server_instance = None
腳本首先導(dǎo)入了所有必需的庫(kù)。
定義了三個(gè)全局變量:
- selected_folder: 存儲(chǔ)用戶通過(guò) GUI 選擇的圖片文件夾路徑。
- server_thread: 用于保存運(yùn)行 HTTP 服務(wù)器的線程對(duì)象。
- server_instance: 用于保存實(shí)際的 TCPServer 服務(wù)器實(shí)例。
在這個(gè)場(chǎng)景下使用全局變量簡(jiǎn)化了狀態(tài)管理,但在更復(fù)雜的應(yīng)用中可能需要更精細(xì)的狀態(tài)管理機(jī)制。
2. 自定義 HTTP 請(qǐng)求處理器 (ImageHandler)
class ImageHandler(http.server.SimpleHTTPRequestHandler): def __init__(self, *args, **kwargs): # 確保每次請(qǐng)求都使用最新的文件夾路徑 global selected_folder # 將directory參數(shù)傳遞給父類的__init__方法 super().__init__(directory=selected_folder, *args, **kwargs) def do_GET(self): # ... (處理 "/" 根路徑請(qǐng)求,生成 HTML 頁(yè)面) ... # ... (處理 "/images/..." 圖片文件請(qǐng)求) ... # ... (處理其他路徑,返回 404) ...
這個(gè)類繼承自 http.server.SimpleHTTPRequestHandler,它提供了處理靜態(tài)文件請(qǐng)求的基礎(chǔ)功能。
__init__ (構(gòu)造函數(shù)): 這是個(gè)關(guān)鍵點(diǎn)。每次處理新的 HTTP 請(qǐng)求時(shí),這個(gè)構(gòu)造函數(shù)都會(huì)被調(diào)用。它會(huì)讀取當(dāng)前的 selected_folder 全局變量的值,并將其作為 directory 參數(shù)傳遞給父類的構(gòu)造函數(shù)。這意味著服務(wù)器始終從 GUI 中最新選擇的文件夾提供服務(wù)。(注意:當(dāng)前代碼邏輯下,用戶選擇新文件夾后需要重新點(diǎn)擊“啟動(dòng)服務(wù)器”按鈕才會(huì)生效)。
do_GET 方法: 這個(gè)方法負(fù)責(zé)處理所有傳入的 HTTP GET 請(qǐng)求。
請(qǐng)求根路徑 (/):
1.當(dāng)用戶訪問(wèn)服務(wù)器的根地址時(shí)(例如 http://<ip>:8000/),此部分代碼被執(zhí)行。
2.它會(huì)掃描 selected_folder 文件夾,找出所有具有常見圖片擴(kuò)展名(如 .jpg, .png, .gif 等)的文件。
3.計(jì)算每個(gè)圖片文件的大小(轉(zhuǎn)換為 MB 或 KB)。
4.按文件名對(duì)圖片列表進(jìn)行字母排序。
5.動(dòng)態(tài)生成一個(gè)完整的 HTML 頁(yè)面,頁(yè)面內(nèi)容包括:
CSS 樣式: 定義了頁(yè)面的外觀,包括響應(yīng)式的網(wǎng)格布局 (.gallery)、圖片容器樣式、用于大圖預(yù)覽的模態(tài)彈出框 (.modal)、導(dǎo)航按鈕、加載指示器以及圖片懶加載的淡入效果。
HTML 結(jié)構(gòu): 包含一個(gè)標(biāo)題 (<h1>)、一個(gè)加載進(jìn)度條 (<div>)、一個(gè)圖片畫廊區(qū)域 (<div class="gallery">),其中填充了每個(gè)圖片項(xiàng)(包含一個(gè) img 標(biāo)簽用于懶加載、圖片文件名和文件大?。?,以及模態(tài)框的 HTML 結(jié)構(gòu)。
JavaScript 腳本: 實(shí)現(xiàn)了前端的交互邏輯:
- 圖片懶加載 (Lazy Loading): 利用現(xiàn)代瀏覽器的 IntersectionObserver API(并為舊瀏覽器提供后備方案),僅當(dāng)圖片滾動(dòng)到可視區(qū)域時(shí)才加載其 src,極大地提高了包含大量圖片時(shí)的初始頁(yè)面加載速度。同時(shí),還實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的加載進(jìn)度條。
- 模態(tài)框預(yù)覽: 當(dāng)用戶點(diǎn)擊任意縮略圖時(shí),會(huì)彈出一個(gè)覆蓋全屏的模態(tài)框,顯示對(duì)應(yīng)的大圖。
- 圖片導(dǎo)航: 在模態(tài)框中,用戶可以通過(guò)點(diǎn)擊“上一張”/“下一張”按鈕,或使用鍵盤的左右箭頭鍵來(lái)切換瀏覽圖片。按 Escape 鍵可以關(guān)閉模態(tài)框。
- 圖片預(yù)加載: 在打開模態(tài)框顯示某張圖片時(shí),腳本會(huì)嘗試預(yù)加載其相鄰(上一張和下一張)的圖片,以提升導(dǎo)航切換時(shí)的流暢度。
6.最后,服務(wù)器將生成的 HTML 頁(yè)面內(nèi)容連同正確的 HTTP 頭部(Content-Type: text/html, Cache-Control 設(shè)置為緩存 1 小時(shí))發(fā)送給瀏覽器。
請(qǐng)求圖片路徑 (/images/...):
- 當(dāng)瀏覽器請(qǐng)求的路徑以 /images/ 開頭時(shí)(這是 HTML 中 <img> 標(biāo)簽的 src 指向的路徑),服務(wù)器認(rèn)為它是在請(qǐng)求一個(gè)具體的圖片文件。
- 代碼從路徑中提取出圖片文件名,并結(jié)合 selected_folder 構(gòu)建出完整的文件系統(tǒng)路徑。
- 檢查該文件是否存在且確實(shí)是一個(gè)文件。
- 使用 mimetypes.guess_type 來(lái)推斷文件的 MIME 類型(例如 image/jpeg),并為 PNG 和未知類型提供回退。
- 將圖片文件的二進(jìn)制內(nèi)容讀取出來(lái),并連同相應(yīng)的 HTTP 頭部(Content-Type, Content-Length, Cache-Control 設(shè)置為緩存 1 天以提高性能, Accept-Ranges 表示支持范圍請(qǐng)求)發(fā)送給瀏覽器。
請(qǐng)求其他路徑:
對(duì)于所有其他無(wú)法識(shí)別的請(qǐng)求路徑,服務(wù)器返回 404 “File not found” 錯(cuò)誤。
3. 啟動(dòng)服務(wù)器函數(shù) (start_server)
def start_server(port=8000): global server_instance # 設(shè)置允許地址重用,解決端口被占用的問(wèn)題 socketserver.TCPServer.allow_reuse_address = True # 創(chuàng)建服務(wù)器實(shí)例 server_instance = socketserver.TCPServer(("", port), ImageHandler) server_instance.serve_forever()
這個(gè)函數(shù)被設(shè)計(jì)用來(lái)在一個(gè)單獨(dú)的線程中運(yùn)行。
socketserver.TCPServer.allow_reuse_address = True 是一個(gè)重要的設(shè)置,它允許服務(wù)器在關(guān)閉后立即重新啟動(dòng)時(shí)可以快速重用相同的端口,避免常見的“地址已被使用”錯(cuò)誤。
它創(chuàng)建了一個(gè) TCPServer 實(shí)例,監(jiān)聽本機(jī)的所有網(wǎng)絡(luò)接口 ("") 上的指定端口(默認(rèn)為 8000),并指定使用我們自定義的 ImageHandler 類來(lái)處理所有接收到的請(qǐng)求。
server_instance.serve_forever() 啟動(dòng)了服務(wù)器的主循環(huán),持續(xù)監(jiān)聽和處理連接請(qǐng)求,直到 shutdown() 方法被調(diào)用。
4. 獲取本機(jī) IP 函數(shù) (get_local_ip)
def get_local_ip(): try: # 創(chuàng)建一個(gè)臨時(shí)套接字連接到外部地址,以獲取本機(jī)IP s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) s.connect(("8.8.8.8", 80)) # 連接到一個(gè)公共地址(如谷歌DNS),無(wú)需實(shí)際發(fā)送數(shù)據(jù) ip = s.getsockname()[0] # 獲取用于此連接的本地套接字地址 s.close() return ip except: return "127.0.0.1" # 如果獲取失敗,返回本地回環(huán)地址
這是一個(gè)實(shí)用工具函數(shù),用于查找運(yùn)行腳本的計(jì)算機(jī)在局域網(wǎng)中的 IP 地址。這對(duì)于告訴用戶(以及其他設(shè)備)應(yīng)該訪問(wèn)哪個(gè) URL 非常重要。
它使用了一個(gè)常用技巧:創(chuàng)建一個(gè) UDP 套接字,并嘗試“連接”(這并不會(huì)實(shí)際發(fā)送數(shù)據(jù))到一個(gè)已知的外部 IP 地址(例如 Google 的公共 DNS 服務(wù)器 8.8.8.8)。操作系統(tǒng)為了完成這個(gè)(虛擬的)連接,會(huì)確定應(yīng)該使用哪個(gè)本地 IP 地址,然后我們就可以通過(guò) getsockname() 獲取這個(gè)地址。
如果嘗試獲取 IP 失?。ɡ纾瑳]有網(wǎng)絡(luò)連接),它會(huì)回退到返回 127.0.0.1 (localhost)。
5. wxPython 圖形用戶界面 (PhotoServerApp, PhotoServerFrame)
PhotoServerApp (應(yīng)用程序類):
class PhotoServerApp(wx.App): def OnInit(self): self.frame = PhotoServerFrame("圖片服務(wù)器", (600, 400)) self.frame.Show() return True
標(biāo)準(zhǔn)的 wx.App 子類。它的 OnInit 方法負(fù)責(zé)創(chuàng)建并顯示主應(yīng)用程序窗口 (PhotoServerFrame)。
PhotoServerFrame (主窗口類):
class PhotoServerFrame(wx.Frame): def __init__(self, title, size): # ... 創(chuàng)建界面控件 (文本框, 按鈕, 靜態(tài)文本) ... # ... 使用 wx.BoxSizer 進(jìn)行布局管理 ... # ... 綁定事件處理函數(shù) (on_browse, on_start_server, on_stop_server, on_close) ... # ... 初始化設(shè)置 (禁用停止按鈕, 顯示歡迎信息) ... def on_browse(self, event): # ... 彈出文件夾選擇對(duì)話框 (wx.DirDialog) ... # ... 更新全局變量 selected_folder 和界面上的文本框 ... def on_start_server(self, event): # ... 檢查是否已選擇文件夾 ... # ... 如果服務(wù)器已運(yùn)行,先停止舊的再啟動(dòng)新的(實(shí)現(xiàn)簡(jiǎn)單的重啟邏輯)... # ... 在新的后臺(tái)守護(hù)線程 (daemon thread) 中啟動(dòng)服務(wù)器 ... # ... 獲取本機(jī) IP, 更新界面按鈕狀態(tài), 在狀態(tài)區(qū)記錄日志, 自動(dòng)打開瀏覽器 ... # ... 包含基本的錯(cuò)誤處理 ... def on_stop_server(self, event): # ... 調(diào)用 server_instance.shutdown() 關(guān)閉服務(wù)器 ... # ... 等待服務(wù)器線程結(jié)束 (join) ... # ... 更新界面按鈕狀態(tài), 在狀態(tài)區(qū)記錄日志 ... def log_status(self, message): # ... 將消息追加到狀態(tài)顯示文本框 (self.status_txt) ... def on_close(self, event): # ... 綁定窗口關(guān)閉事件,確保退出程序前嘗試關(guān)閉服務(wù)器 ... # ... event.Skip() 允許默認(rèn)的窗口關(guān)閉行為繼續(xù)執(zhí)行 ...
這個(gè)類定義了應(yīng)用程序的主窗口。
__init__: 創(chuàng)建所有的可視化元素:一個(gè)只讀文本框顯示選定的文件夾路徑,“選擇文件夾” 按鈕,“啟動(dòng)服務(wù)器” 和 “停止服務(wù)器” 按鈕,以及一個(gè)多行只讀文本框用于顯示服務(wù)器狀態(tài)和日志信息。它還使用 wx.BoxSizer 來(lái)組織這些控件的布局,并綁定了按鈕點(diǎn)擊事件和窗口關(guān)閉事件到相應(yīng)的方法。初始時(shí),“停止服務(wù)器”按鈕是禁用的。
on_browse: 處理 “選擇文件夾” 按鈕的點(diǎn)擊事件。它會(huì)彈出一個(gè)標(biāo)準(zhǔn)的文件夾選擇對(duì)話框。如果用戶選擇了文件夾并確認(rèn),它會(huì)更新 selected_folder 全局變量,并將路徑顯示在界面文本框中,同時(shí)記錄一條日志。
on_start_server: 處理 “啟動(dòng)服務(wù)器” 按鈕的點(diǎn)擊事件。
- 首先檢查用戶是否已經(jīng)選擇了文件夾。
- 檢查服務(wù)器是否已在運(yùn)行。如果是,它會(huì)先嘗試 shutdown() 當(dāng)前服務(wù)器實(shí)例并等待線程結(jié)束,然后才啟動(dòng)新的服務(wù)器線程(提供了一種重啟服務(wù)的方式)。
- 創(chuàng)建一個(gè)新的 threading.Thread 來(lái)運(yùn)行 start_server 函數(shù)。將線程設(shè)置為 daemon=True,這樣主程序退出時(shí),這個(gè)后臺(tái)線程也會(huì)自動(dòng)結(jié)束。
- 調(diào)用 get_local_ip() 獲取本機(jī) IP。
- 更新 GUI 按鈕的狀態(tài)(禁用“啟動(dòng)”和“選擇文件夾”,啟用“停止”)。
- 在狀態(tài)文本框中打印服務(wù)器已啟動(dòng)、IP 地址、端口號(hào)以及供手機(jī)訪問(wèn)的 URL。
- 使用 webbrowser.open() 自動(dòng)在用戶的默認(rèn)瀏覽器中打開服務(wù)器地址。
- 包含了一個(gè) try...except 塊來(lái)捕獲并顯示啟動(dòng)過(guò)程中可能出現(xiàn)的錯(cuò)誤。
on_stop_server: 處理 “停止服務(wù)器” 按鈕的點(diǎn)擊事件。
- 如果服務(wù)器實(shí)例存在 (server_instance 不為 None),調(diào)用 server_instance.shutdown() 來(lái)請(qǐng)求服務(wù)器停止。shutdown() 會(huì)使 serve_forever() 循環(huán)退出。
- 等待服務(wù)器線程 (server_thread) 結(jié)束(使用 join() 并設(shè)置了短暫的超時(shí))。
- 重置全局變量 server_instance 和 server_thread 為 None。
- 更新 GUI 按鈕狀態(tài)(啟用“啟動(dòng)”和“選擇文件夾”,禁用“停止”)。
- 記錄服務(wù)器已停止的日志。
log_status: 一個(gè)簡(jiǎn)單的輔助方法,將傳入的消息追加到狀態(tài)文本框 self.status_txt 中,并在末尾添加換行符。
on_close: 當(dāng)用戶點(diǎn)擊窗口的關(guān)閉按鈕時(shí)觸發(fā)。它會(huì)檢查服務(wù)器是否仍在運(yùn)行,如果是,則嘗試調(diào)用 shutdown() 來(lái)關(guān)閉服務(wù)器,以確保資源被正確釋放。
event.Skip() 允許 wxPython 繼續(xù)執(zhí)行默認(rèn)的窗口關(guān)閉流程。
6. 程序入口 (if __name__ == "__main__":)
if __name__ == "__main__": app = PhotoServerApp(False) app.MainLoop()
這是標(biāo)準(zhǔn)的 Python 腳本入口點(diǎn)。
它創(chuàng)建了 PhotoServerApp 的實(shí)例。
調(diào)用 app.MainLoop() 啟動(dòng)了 wxPython 的事件循環(huán)。這個(gè)循環(huán)會(huì)監(jiān)聽用戶的交互(如按鈕點(diǎn)擊、窗口關(guān)閉等)并分派事件給相應(yīng)的處理函數(shù),直到應(yīng)用程序退出。
完整代碼
# -*- coding: utf-8 -*- # (在此處粘貼完整的 Python 代碼) import wx import os import http.server import socketserver import threading import socket import webbrowser from pathlib import Path # 實(shí)際未使用 os.path import mimetypes # 全局變量,用于存儲(chǔ)選擇的圖片文件夾路徑 selected_folder = "" server_thread = None server_instance = None # 自定義HTTP請(qǐng)求處理器 class ImageHandler(http.server.SimpleHTTPRequestHandler): def __init__(self, *args, **kwargs): # 確保每次請(qǐng)求都使用最新的文件夾路徑 global selected_folder # 將directory參數(shù)傳遞給父類的__init__方法 # 注意:SimpleHTTPRequestHandler 在 Python 3.7+ 才接受 directory 參數(shù) # 如果在更早版本運(yùn)行,需要修改此處的實(shí)現(xiàn)方式(例如,在 do_GET 中處理路徑) super().__init__(directory=selected_folder, *args, **kwargs) def do_GET(self): # 使用 os.path.join 來(lái)確保路徑分隔符正確 requested_path = os.path.normpath(self.translate_path(self.path)) if self.path == "/": # 顯示圖片列表的主頁(yè) self.send_response(200) self.send_header("Content-type", "text/html; charset=utf-8") # 指定UTF-8編碼 self.send_header("Cache-Control", "max-age=3600") # 緩存1小時(shí),提高加載速度 self.end_headers() # 獲取圖片文件列表 image_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'] image_files = [] current_directory = self.directory # 使用 __init__ 中設(shè)置的目錄 try: # 確保目錄存在 if not os.path.isdir(current_directory): self.wfile.write(f"錯(cuò)誤:目錄 '{current_directory}' 不存在或不是一個(gè)目錄。".encode('utf-8')) return for file in os.listdir(current_directory): file_path = os.path.join(current_directory, file) if os.path.isfile(file_path) and os.path.splitext(file)[1].lower() in image_extensions: # 獲取文件大小用于顯示預(yù)加載信息 try: file_size = os.path.getsize(file_path) / (1024 * 1024) # 轉(zhuǎn)換為MB image_files.append((file, file_size)) except OSError as e: self.log_error(f"獲取文件大小出錯(cuò): {file} - {str(e)}") except Exception as e: self.log_error(f"讀取目錄出錯(cuò): {current_directory} - {str(e)}") # 可以向?yàn)g覽器發(fā)送一個(gè)錯(cuò)誤信息 self.wfile.write(f"讀取目錄時(shí)發(fā)生錯(cuò)誤: {str(e)}".encode('utf-8')) return # 按文件名排序 (考慮自然排序可能更好,如 '1.jpg', '2.jpg', '10.jpg') image_files.sort(key=lambda x: x[0].lower()) # 生成HTML頁(yè)面 # 使用 f-string 或模板引擎生成 HTML 會(huì)更清晰 html_parts = [] html_parts.append(""" <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圖片瀏覽</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; } h1 { color: #333; text-align: center; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 15px; margin-top: 20px; } .image-item { background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); overflow: hidden; } /* 添加 overflow hidden */ .image-container { width: 100%; padding-bottom: 75%; /* 4:3 aspect ratio */ position: relative; overflow: hidden; cursor: pointer; background-color: #eee; /* Placeholder color */ } .image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Use cover for better thumbnail */ transition: transform 0.3s, opacity 0.3s; opacity: 0; /* Start hidden for lazy load */ } .image-container img.lazy-loaded { opacity: 1; } /* Fade in when loaded */ .image-container:hover img { transform: scale(1.05); } .image-info { padding: 8px 10px; } /* Group name and size */ .image-name { text-align: center; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 3px; } .image-size { text-align: center; font-size: 11px; color: #666; } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); } .modal-content { display: block; max-width: 90%; max-height: 90%; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; } .modal-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; } .modal-caption { color: white; position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 14px; } .nav-button { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 30px; font-weight: bold; cursor: pointer; background: rgba(0,0,0,0.4); border-radius: 50%; width: 45px; height: 45px; text-align: center; line-height: 45px; user-select: none; transition: background 0.2s; } .nav-button:hover { background: rgba(0,0,0,0.7); } .prev { left: 15px; } .next { right: 15px; } .loading-indicator { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: #4CAF50; z-index: 2000; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-out, opacity 0.5s 0.5s; /* Fade out after completion */ opacity: 1; } .loading-indicator.hidden { opacity: 0; } @media (max-width: 600px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Smaller thumbnails on mobile */ } .nav-button { width: 40px; height: 40px; line-height: 40px; font-size: 25px; } .modal-close { font-size: 30px; top: 10px; right: 20px; } } </style> </head> <body> <h1>圖片瀏覽</h1> <div class="loading-indicator" id="loadingBar"></div> <div class="gallery" id="imageGallery"> """) if not image_files: html_parts.append("<p style='text-align:center; color: #555;'>未在此文件夾中找到圖片。</p>") # 使用 urllib.parse.quote 來(lái)編碼文件名,防止特殊字符問(wèn)題 from urllib.parse import quote for idx, (image, size) in enumerate(image_files): # 顯示文件名和大小信息 size_display = f"{size:.2f} MB" if size >= 1 else f"{size*1024:.1f} KB" # Encode the image filename for use in URL image_url_encoded = quote(image) html_parts.append(f""" <div class="image-item" data-index="{idx}" data-src="/images/{image_url_encoded}" data-filename="{image.replace('"', '"')}"> <div class="image-container"> <img class="lazy-image" data-src="/images/{image_url_encoded}" alt="{image.replace('"', '"')}" loading="lazy"> </div> <div class="image-info"> <div class="image-name" title="{image.replace('"', '"')}">{image}</div> <div class="image-size">{size_display}</div> </div> </div> """) html_parts.append(""" </div> <div id="imageModal" class="modal"> <span class="modal-close" title="關(guān)閉 (Esc)">×</span> <img class="modal-content" id="modalImage" alt="預(yù)覽圖片"> <div class="modal-caption" id="modalCaption"></div> <div class="nav-button prev" id="prevButton" title="上一張 (←)">❮</div> <div class="nav-button next" id="nextButton" title="下一張 (→)">❯</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const lazyImages = document.querySelectorAll('.lazy-image'); const loadingBar = document.getElementById('loadingBar'); const imageGallery = document.getElementById('imageGallery'); const modal = document.getElementById('imageModal'); const modalImg = document.getElementById('modalImage'); const captionText = document.getElementById('modalCaption'); const prevButton = document.getElementById('prevButton'); const nextButton = document.getElementById('nextButton'); const closeButton = document.querySelector('.modal-close'); let loadedCount = 0; let currentIndex = 0; let allImageItems = []; // Will be populated after DOM ready function updateLoadingBar() { if (lazyImages.length === 0) { loadingBar.style.transform = 'scaleX(1)'; setTimeout(() => { loadingBar.classList.add('hidden'); }, 500); return; } const progress = Math.min(loadedCount / lazyImages.length, 1); loadingBar.style.transform = `scaleX(${progress})`; if (loadedCount >= lazyImages.length) { setTimeout(() => { loadingBar.classList.add('hidden'); }, 500); // Hide after a short delay } } // --- Lazy Loading --- if ('IntersectionObserver' in window) { const observerOptions = { rootMargin: '0px 0px 200px 0px' }; // Load images 200px before they enter viewport const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.onload = () => { img.classList.add('lazy-loaded'); loadedCount++; updateLoadingBar(); }; img.onerror = () => { // Optionally handle image load errors img.alt = "圖片加載失敗"; loadedCount++; // Still count it to finish loading bar updateLoadingBar(); } observer.unobserve(img); } }); }, observerOptions); lazyImages.forEach(img => imageObserver.observe(img)); } else { // Fallback for older browsers lazyImages.forEach(img => { img.src = img.dataset.src; img.onload = () => { img.classList.add('lazy-loaded'); loadedCount++; updateLoadingBar(); }; img.onerror = () => { loadedCount++; updateLoadingBar(); } }); } updateLoadingBar(); // Initial call for case of 0 images // --- Modal Logic --- // Get all image items once DOM is ready allImageItems = Array.from(document.querySelectorAll('.image-item')); function preloadImage(index) { if (index >= 0 && index < allImageItems.length) { const img = new Image(); img.src = allImageItems[index].dataset.src; } } function openModal(index) { if (index < 0 || index >= allImageItems.length) return; currentIndex = index; const item = allImageItems[index]; const imgSrc = item.dataset.src; const filename = item.dataset.filename; modalImg.src = imgSrc; // Set src immediately modalImg.alt = filename; captionText.textContent = `${filename} (${index + 1}/${allImageItems.length})`; // Use textContent for security modal.style.display = 'block'; document.body.style.overflow = 'hidden'; // Prevent background scrolling // Preload adjacent images preloadImage(index - 1); preloadImage(index + 1); } function closeModal() { modal.style.display = 'none'; modalImg.src = ""; // Clear src to stop loading/free memory document.body.style.overflow = ''; // Restore background scrolling } function showPrevImage() { const newIndex = (currentIndex - 1 + allImageItems.length) % allImageItems.length; openModal(newIndex); } function showNextImage() { const newIndex = (currentIndex + 1) % allImageItems.length; openModal(newIndex); } // Event Listeners imageGallery.addEventListener('click', function(e) { const item = e.target.closest('.image-item'); if (item) { const index = parseInt(item.dataset.index, 10); openModal(index); } }); closeButton.addEventListener('click', closeModal); prevButton.addEventListener('click', showPrevImage); nextButton.addEventListener('click', showNextImage); // Close modal if background is clicked modal.addEventListener('click', function(e) { if (e.target === modal) { closeModal(); } }); // Keyboard navigation document.addEventListener('keydown', function(e) { if (modal.style.display === 'block') { if (e.key === 'ArrowLeft') { showPrevImage(); } else if (e.key === 'ArrowRight') { showNextImage(); } else if (e.key === 'Escape') { closeModal(); } } }); }); </script> </body> </html> """) # Combine and send HTML full_html = "".join(html_parts) self.wfile.write(full_html.encode('utf-8')) # Ensure UTF-8 encoding # --- Serve Image Files --- # Check if the requested path seems like an image file request within our structure elif self.path.startswith("/images/"): # Decode the URL path component from urllib.parse import unquote try: image_name = unquote(self.path[len("/images/"):]) except Exception as e: self.send_error(400, f"Bad image path encoding: {e}") return # Construct the full path using the selected directory # Important: Sanitize image_name to prevent directory traversal attacks # os.path.join on its own is NOT enough if image_name contains '..' or starts with '/' image_path_unsafe = os.path.join(self.directory, image_name) # Basic sanitization: ensure the resolved path is still within the base directory base_dir_real = os.path.realpath(self.directory) image_path_real = os.path.realpath(image_path_unsafe) if not image_path_real.startswith(base_dir_real): self.send_error(403, "Forbidden: Path traversal attempt?") return if os.path.exists(image_path_real) and os.path.isfile(image_path_real): try: # Get MIME type content_type, _ = mimetypes.guess_type(image_path_real) if content_type is None: # Guess common types again or default ext = os.path.splitext(image_name)[1].lower() if ext == '.png': content_type = 'image/png' elif ext in ['.jpg', '.jpeg']: content_type = 'image/jpeg' elif ext == '.gif': content_type = 'image/gif' elif ext == '.webp': content_type = 'image/webp' else: content_type = 'application/octet-stream' # Get file size file_size = os.path.getsize(image_path_real) # Send headers self.send_response(200) self.send_header('Content-type', content_type) self.send_header('Content-Length', str(file_size)) self.send_header('Cache-Control', 'max-age=86400') # Cache for 1 day self.send_header('Accept-Ranges', 'bytes') # Indicate support for range requests self.end_headers() # Send file content with open(image_path_real, 'rb') as file: # Simple send - for large files consider shutil.copyfileobj self.wfile.write(file.read()) except IOError as e: self.log_error(f"IOError serving file: {image_path_real} - {str(e)}") self.send_error(500, f"Error reading file: {str(e)}") except Exception as e: self.log_error(f"Error serving file: {image_path_real} - {str(e)}") self.send_error(500, f"Server error serving file: {str(e)}") else: self.send_error(404, "Image not found") else: # For any other path, let the base class handle it (or send 404) # super().do_GET() # If you want base class behavior for other files self.send_error(404, "File not found") # Or just send 404 directly # 啟動(dòng)HTTP服務(wù)器 def start_server(port=8000): global server_instance # 設(shè)置允許地址重用,解決端口被占用的問(wèn)題 socketserver.TCPServer.allow_reuse_address = True try: # 創(chuàng)建服務(wù)器實(shí)例 server_instance = socketserver.TCPServer(("", port), ImageHandler) print(f"服務(wù)器啟動(dòng)于端口 {port}...") server_instance.serve_forever() print("服務(wù)器已停止。") # This line will be reached after shutdown() except OSError as e: print(f"!!! 啟動(dòng)服務(wù)器失敗(端口 {port}): {e}") # Optionally notify the GUI thread here if needed # wx.CallAfter(frame.notify_server_start_failed, str(e)) server_instance = None # Ensure instance is None if failed except Exception as e: print(f"!!! 啟動(dòng)服務(wù)器時(shí)發(fā)生意外錯(cuò)誤: {e}") server_instance = None # 獲取本機(jī)IP地址 def get_local_ip(): ip = "127.0.0.1" # Default fallback try: # Create a socket object s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) # Doesn't need to be reachable s.connect(("8.8.8.8", 80)) ip = s.getsockname()[0] s.close() except Exception as e: print(f"無(wú)法自動(dòng)獲取本機(jī)IP: {e},將使用 {ip}") return ip # 主應(yīng)用程序類 class PhotoServerApp(wx.App): def OnInit(self): # SetAppName helps with some platform integrations self.SetAppName("PhotoServer") self.frame = PhotoServerFrame(None, title="本地圖片服務(wù)器", size=(650, 450)) # Slightly larger window self.frame.Show() return True # 主窗口類 class PhotoServerFrame(wx.Frame): def __init__(self, parent, title, size): super().__init__(parent, title=title, size=size) # 創(chuàng)建面板 self.panel = wx.Panel(self) # 創(chuàng)建控件 folder_label = wx.StaticText(self.panel, label="圖片文件夾:") self.folder_txt = wx.TextCtrl(self.panel, style=wx.TE_READONLY | wx.BORDER_STATIC) # Use static border self.browse_btn = wx.Button(self.panel, label="選擇文件夾(&B)...", id=wx.ID_OPEN) # Use standard ID and mnemonic self.start_btn = wx.Button(self.panel, label="啟動(dòng)服務(wù)(&S)") self.stop_btn = wx.Button(self.panel, label="停止服務(wù)(&T)") status_label = wx.StaticText(self.panel, label="服務(wù)器狀態(tài):") self.status_txt = wx.TextCtrl(self.panel, style=wx.TE_MULTILINE | wx.TE_READONLY | wx.HSCROLL | wx.BORDER_THEME) # Add scroll and theme border # 設(shè)置停止按鈕初始狀態(tài)為禁用 self.stop_btn.Disable() # 綁定事件 self.Bind(wx.EVT_BUTTON, self.on_browse, self.browse_btn) self.Bind(wx.EVT_BUTTON, self.on_start_server, self.start_btn) self.Bind(wx.EVT_BUTTON, self.on_stop_server, self.stop_btn) self.Bind(wx.EVT_CLOSE, self.on_close) # --- 使用 Sizers 進(jìn)行布局 --- # 主垂直 Sizer main_sizer = wx.BoxSizer(wx.VERTICAL) # 文件夾選擇行 (水平 Sizer) folder_sizer = wx.BoxSizer(wx.HORIZONTAL) folder_sizer.Add(folder_label, 0, wx.ALIGN_CENTER_VERTICAL | wx.RIGHT, 5) folder_sizer.Add(self.folder_txt, 1, wx.EXPAND | wx.RIGHT, 5) # 讓文本框擴(kuò)展 folder_sizer.Add(self.browse_btn, 0, wx.ALIGN_CENTER_VERTICAL) main_sizer.Add(folder_sizer, 0, wx.EXPAND | wx.ALL, 10) # Add padding around this row # 控制按鈕行 (水平 Sizer) - 居中 buttons_sizer = wx.BoxSizer(wx.HORIZONTAL) buttons_sizer.Add(self.start_btn, 0, wx.RIGHT, 5) buttons_sizer.Add(self.stop_btn, 0) main_sizer.Add(buttons_sizer, 0, wx.ALIGN_CENTER | wx.BOTTOM, 10) # Center align and add bottom margin # 狀態(tài)標(biāo)簽和文本框 main_sizer.Add(status_label, 0, wx.LEFT | wx.RIGHT | wx.TOP, 10) main_sizer.Add(self.status_txt, 1, wx.EXPAND | wx.LEFT | wx.RIGHT | wx.BOTTOM, 10) # Let status text expand # 設(shè)置面板 Sizer 并適應(yīng)窗口 self.panel.SetSizer(main_sizer) self.panel.Layout() # self.Fit() # Optional: Adjust window size to fit content initially # 居中顯示窗口 self.Centre(wx.BOTH) # Center on screen # 顯示初始信息 self.log_status("歡迎使用圖片服務(wù)器!請(qǐng)選擇一個(gè)包含圖片的文件夾,然后啟動(dòng)服務(wù)器。") def on_browse(self, event): # 彈出文件夾選擇對(duì)話框 # Use the current value as the default path if available default_path = self.folder_txt.GetValue() if self.folder_txt.GetValue() else os.getcwd() dialog = wx.DirDialog(self, "選擇圖片文件夾", defaultPath=default_path, style=wx.DD_DEFAULT_STYLE | wx.DD_DIR_MUST_EXIST | wx.DD_CHANGE_DIR) if dialog.ShowModal() == wx.ID_OK: global selected_folder new_folder = dialog.GetPath() # Only update if the folder actually changed if new_folder != selected_folder: selected_folder = new_folder self.folder_txt.SetValue(selected_folder) self.log_status(f"已選擇文件夾: {selected_folder}") # If server is running, maybe prompt user to restart? # Or automatically enable start button if it was disabled due to no folder? if not self.start_btn.IsEnabled() and not (server_thread and server_thread.is_alive()): self.start_btn.Enable() dialog.Destroy() def on_start_server(self, event): global server_thread, selected_folder, server_instance # 檢查是否已選擇文件夾 if not selected_folder or not os.path.isdir(selected_folder): wx.MessageBox("請(qǐng)先選擇一個(gè)有效的圖片文件夾!", "錯(cuò)誤", wx.OK | wx.ICON_ERROR, self) return # 檢查服務(wù)器是否已經(jīng)在運(yùn)行 (更可靠的方式是檢查 server_instance) if server_instance is not None and server_thread is not None and server_thread.is_alive(): self.log_status("服務(wù)器已經(jīng)在運(yùn)行中。請(qǐng)先停止。") # wx.MessageBox("服務(wù)器已經(jīng)在運(yùn)行中。如果需要使用新文件夾,請(qǐng)先停止。", "提示", wx.OK | wx.ICON_INFORMATION, self) return # Don't restart automatically here, let user stop first port = 8000 # You might want to make this configurable self.log_status(f"正在嘗試啟動(dòng)服務(wù)器在端口 {port}...") try: # 清理舊線程引用 (以防萬(wàn)一) if server_thread and not server_thread.is_alive(): server_thread = None # 創(chuàng)建并啟動(dòng)服務(wù)器線程 # Pass the frame or a callback mechanism if start_server needs to report failure back to GUI server_thread = threading.Thread(target=start_server, args=(port,), daemon=True) server_thread.start() # --- 短暫等待,看服務(wù)器是否啟動(dòng)成功 --- # 這是一種簡(jiǎn)單的方法,更健壯的是使用事件或隊(duì)列從線程通信 threading.Timer(0.5, self.check_server_status_after_start, args=(port,)).start() except Exception as e: self.log_status(f"!!! 啟動(dòng)服務(wù)器線程時(shí)出錯(cuò): {str(e)}") wx.MessageBox(f"啟動(dòng)服務(wù)器線程時(shí)出錯(cuò): {str(e)}", "嚴(yán)重錯(cuò)誤", wx.OK | wx.ICON_ERROR, self) def check_server_status_after_start(self, port): # This runs in a separate thread (from Timer), use wx.CallAfter to update GUI global server_instance if server_instance is not None: ip_address = get_local_ip() url = f"http://{ip_address}:{port}" def update_gui_success(): self.log_status("服務(wù)器已成功啟動(dòng)!") self.log_status(f"本機(jī) IP 地址: {ip_address}") self.log_status(f"端口: {port}") self.log_status(f"請(qǐng)?jiān)跒g覽器中訪問(wèn): {url}") self.start_btn.Disable() self.stop_btn.Enable() self.browse_btn.Disable() # Disable browse while running try: webbrowser.open(url) except Exception as wb_e: self.log_status(f"自動(dòng)打開瀏覽器失敗: {wb_e}") wx.CallAfter(update_gui_success) else: def update_gui_failure(): self.log_status("!!! 服務(wù)器未能成功啟動(dòng),請(qǐng)檢查端口是否被占用或查看控制臺(tái)輸出。") # Ensure buttons are in correct state if start failed self.start_btn.Enable() self.stop_btn.Disable() self.browse_btn.Enable() wx.CallAfter(update_gui_failure) def on_stop_server(self, event): global server_thread, server_instance if server_instance: self.log_status("正在停止服務(wù)器...") try: # Shutdown must be called from a different thread than serve_forever # So, start a small thread just to call shutdown def shutdown_server(): try: server_instance.shutdown() # Request shutdown # server_instance.server_close() # Close listening socket immediately except Exception as e: # Use CallAfter to log from this thread wx.CallAfter(self.log_status, f"關(guān)閉服務(wù)器時(shí)出錯(cuò): {e}") shutdown_thread = threading.Thread(target=shutdown_server) shutdown_thread.start() shutdown_thread.join(timeout=2.0) # Wait briefly for shutdown command # Now wait for the main server thread to exit if server_thread: server_thread.join(timeout=2.0) # Wait up to 2 seconds if server_thread.is_alive(): self.log_status("警告:服務(wù)器線程未能及時(shí)停止。") server_thread = None server_instance = None # Mark as stopped # Update UI self.start_btn.Enable() self.stop_btn.Disable() self.browse_btn.Enable() self.log_status("服務(wù)器已停止!") except Exception as e: self.log_status(f"!!! 停止服務(wù)器時(shí)發(fā)生錯(cuò)誤: {str(e)}") # Attempt to force button state reset even if error occurred self.start_btn.Enable() self.stop_btn.Disable() self.browse_btn.Enable() else: self.log_status("服務(wù)器當(dāng)前未運(yùn)行。") # Ensure button states are correct if already stopped self.start_btn.Enable() self.stop_btn.Disable() self.browse_btn.Enable() def log_status(self, message): # Ensure UI updates happen on the main thread def append_text(): # Optional: Add timestamp # import datetime # timestamp = datetime.datetime.now().strftime("%H:%M:%S") # self.status_txt.AppendText(f"[{timestamp}] {message}\n") self.status_txt.AppendText(f"{message}\n") self.status_txt.SetInsertionPointEnd() # Scroll to end # If called from background thread, use CallAfter if wx.IsMainThread(): append_text() else: wx.CallAfter(append_text) def on_close(self, event): # 關(guān)閉窗口時(shí)確保服務(wù)器也被關(guān)閉 if server_instance and server_thread and server_thread.is_alive(): msg_box = wx.MessageDialog(self, "服務(wù)器仍在運(yùn)行。是否停止服務(wù)器并退出?", "確認(rèn)退出", wx.YES_NO | wx.CANCEL | wx.ICON_QUESTION) result = msg_box.ShowModal() msg_box.Destroy() if result == wx.ID_YES: self.on_stop_server(None) # Call stop logic # Check again if stop succeeded before destroying if server_instance is None: self.Destroy() # Proceed with close else: wx.MessageBox("無(wú)法完全停止服務(wù)器,請(qǐng)手動(dòng)檢查。", "警告", wx.OK | wx.ICON_WARNING, self) # Don't destroy if stop failed, let user retry maybe elif result == wx.ID_NO: self.Destroy() # Exit without stopping server (daemon thread will die) else: # wx.ID_CANCEL # Don't close the window if event.CanVeto(): event.Veto() # Stop the close event else: # Server not running, just exit cleanly self.Destroy() # Explicitly destroy frame if __name__ == "__main__": # Ensure we handle high DPI displays better if possible try: # This might need adjustment based on wxPython version and OS if hasattr(wx, 'EnableAsserts'): wx.EnableAsserts(False) # Optional: Disable asserts for release # Some systems might need this for High DPI scaling: # if hasattr(wx, 'App'): wx.App.SetThreadSafety(wx.APP_THREAD_SAFETY_NONE) # if 'wxMSW' in wx.PlatformInfo: # import ctypes # try: # ctypes.windll.shcore.SetProcessDpiAwareness(1) # Try for Win 8.1+ # except Exception: # try: # ctypes.windll.user32.SetProcessDPIAware() # Try for older Windows # except Exception: pass pass # Keep it simple for now except Exception as e: print(f"無(wú)法設(shè)置 DPI 感知: {e}") app = PhotoServerApp(redirect=False) # redirect=False for easier debugging output app.MainLoop()
工作流程
用戶使用這個(gè)工具的典型流程如下:
- 運(yùn)行 Python 腳本。
- 出現(xiàn)一個(gè)帶有 “圖片服務(wù)器” 標(biāo)題的窗口。
- 點(diǎn)擊 “選擇文件夾” 按鈕,在彈出的對(duì)話框中找到并選擇一個(gè)包含圖片的文件夾。
- 選中的文件夾路徑會(huì)顯示在文本框中。
- 點(diǎn)擊 “啟動(dòng)服務(wù)器” 按鈕。
- 腳本獲取本機(jī) IP 地址,在后臺(tái)啟動(dòng) HTTP 服務(wù)器。
- 狀態(tài)日志區(qū)域會(huì)顯示服務(wù)器已啟動(dòng)、本機(jī) IP 地址和端口號(hào)(通常是 8000),并提示用戶可以通過(guò) http://<本機(jī)IP>:8000 訪問(wèn)。
- 腳本會(huì)自動(dòng)打開系統(tǒng)的默認(rèn)瀏覽器,并訪問(wèn)上述地址。
- 瀏覽器中會(huì)顯示一個(gè)包含所選文件夾中所有圖片縮略圖的網(wǎng)頁(yè)。圖片會(huì)隨著滾動(dòng)懶加載。
- 用戶可以在瀏覽器中滾動(dòng)瀏覽縮略圖。
- 點(diǎn)擊任意縮略圖,會(huì)彈出一個(gè)大圖預(yù)覽模態(tài)框。
- 在模態(tài)框中,可以使用左右箭頭或點(diǎn)擊兩側(cè)按鈕切換圖片。
- 在桌面應(yīng)用程序窗口中,點(diǎn)擊 “停止服務(wù)器” 可以關(guān)閉后臺(tái)服務(wù)。
- 關(guān)閉桌面應(yīng)用程序窗口時(shí),后臺(tái)服務(wù)也會(huì)自動(dòng)嘗試停止。
主要功能與優(yōu)勢(shì)
簡(jiǎn)單易用: 提供圖形界面,操作直觀。
本地網(wǎng)絡(luò)共享: 輕松將電腦上的圖片共享給局域網(wǎng)內(nèi)的手機(jī)、平板等設(shè)備瀏覽。
無(wú)需安裝額外服務(wù)器軟件: 利用 Python 內(nèi)建庫(kù),綠色便攜。
跨平臺(tái)潛力: Python 和 wxPython 都是跨平臺(tái)的,理論上可以在 Windows, macOS, Linux 上運(yùn)行(需安裝相應(yīng)依賴)。
現(xiàn)代化的 Web 界面: 提供了懶加載、模態(tài)預(yù)覽、鍵盤導(dǎo)航等功能,提升了瀏覽體驗(yàn)。
性能考慮: 通過(guò)懶加載和 HTTP 緩存(針對(duì)圖片文件設(shè)置了 1 天緩存,HTML 頁(yè)面 1 小時(shí)緩存)來(lái)優(yōu)化性能。
潛在改進(jìn)與思考
雖然這個(gè)腳本已經(jīng)相當(dāng)實(shí)用,但仍有一些可以改進(jìn)的地方:
更健壯的錯(cuò)誤處理: 對(duì)文件讀取、網(wǎng)絡(luò)錯(cuò)誤等進(jìn)行更細(xì)致的處理和用戶反饋。
安全性: 目前服務(wù)器對(duì)局域網(wǎng)內(nèi)的所有設(shè)備開放,沒有任何訪問(wèn)控制。對(duì)于敏感圖片,可能需要添加密碼驗(yàn)證等安全措施。
處理超大目錄: 如果文件夾包含成千上萬(wàn)張圖片,一次性讀取所有文件名和大小可能仍然會(huì)造成短暫卡頓,可以考慮分批加載或更優(yōu)化的目錄掃描方式。
可配置端口: 將端口號(hào) 8000 硬編碼在了代碼中,可以將其改為用戶可在界面上配置或通過(guò)命令行參數(shù)指定。
支持更多文件類型: 目前只處理了常見的圖片格式,可以擴(kuò)展支持視頻預(yù)覽或其他媒體類型。
異步服務(wù)器: 對(duì)于高并發(fā)場(chǎng)景(雖然在本應(yīng)用中不太可能),可以考慮使用基于 asyncio 的 Web 框架(如 aiohttp, FastAPI 等)代替 socketserver,以獲得更好的性能。
界面美化: wxPython 界面和 HTML 界面都可以進(jìn)一步美化。
運(yùn)行結(jié)果
總結(jié)
這個(gè) Python 腳本是一個(gè)非常實(shí)用的小工具,它完美地結(jié)合了桌面 GUI 的易用性和 Web 技術(shù)的靈活性,為在本地網(wǎng)絡(luò)中快速瀏覽電腦上的圖片提供了一個(gè)優(yōu)雅的解決方案。代碼結(jié)構(gòu)清晰,功能完善,并且展示了 Python 在快速開發(fā)網(wǎng)絡(luò)應(yīng)用方面的強(qiáng)大能力。無(wú)論你是想學(xué)習(xí) GUI 編程、網(wǎng)絡(luò)服務(wù),還是僅僅需要這樣一個(gè)方便的工具,這個(gè)項(xiàng)目都值得一看。
以上就是使用Python開發(fā)一個(gè)簡(jiǎn)單的本地圖片服務(wù)器的詳細(xì)內(nèi)容,更多關(guān)于Python本地圖片服務(wù)器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
用Python實(shí)現(xiàn)數(shù)據(jù)篩選與匹配實(shí)例
大家好,本篇文章主要講的是用Python實(shí)現(xiàn)數(shù)據(jù)篩選與匹配實(shí)例,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下2022-02-02Python爬取國(guó)外天氣預(yù)報(bào)網(wǎng)站的方法
這篇文章主要介紹了Python爬取國(guó)外天氣預(yù)報(bào)網(wǎng)站的方法,可實(shí)現(xiàn)抓取國(guó)外天氣預(yù)報(bào)信息的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07Python實(shí)例方法、類方法、靜態(tài)方法區(qū)別詳解
這篇文章主要介紹了Python實(shí)例方法、類方法、靜態(tài)方法區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09python實(shí)現(xiàn)對(duì)excel表中的某列數(shù)據(jù)進(jìn)行排序的代碼示例
這篇文章主要給大家介紹了如何使用python實(shí)現(xiàn)對(duì)excel表中的某列數(shù)據(jù)進(jìn)行排序,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-11-11Python異步發(fā)送日志到遠(yuǎn)程服務(wù)器詳情
這篇文章主要介紹了Python異步發(fā)送日志到遠(yuǎn)程服務(wù)器詳情,文章通過(guò)簡(jiǎn)單輸出到cmd和文件中的代碼展開詳情,需要的朋友可以參考一下2022-07-07python實(shí)現(xiàn)下載整個(gè)ftp目錄的方法
這篇文章主要介紹了python實(shí)現(xiàn)下載整個(gè)ftp目錄的方法,文中給出了詳細(xì)的示例代碼,相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友可以一起來(lái)學(xué)習(xí)學(xué)習(xí)。2017-01-01