使用Python開發(fā)一個簡單的本地圖片服務(wù)器
你是否曾經(jīng)想過,如何能方便地將在電腦上存儲的照片,通過手機或平板在局域網(wǎng)內(nèi)快速瀏覽?今天介紹的這個 Python 腳本就能幫你輕松實現(xiàn)!它巧妙地結(jié)合了 wxPython 構(gòu)建的圖形用戶界面(GUI)和 Python 內(nèi)建的 Web 服務(wù)器功能,讓你在本地網(wǎng)絡(luò)中搭建一個私人的、即開即用的網(wǎng)頁相冊。
讓我們一起深入代碼,看看它是如何一步步實現(xiàn)的。
項目目標
這個腳本的核心目標是:
- 提供一個簡單的桌面應(yīng)用程序,讓用戶可以選擇包含圖片的本地文件夾。
- 啟動一個本地 HTTP 服務(wù)器,該服務(wù)器能生成一個展示所選文件夾內(nèi)圖片縮略圖的 HTML 頁面。
- 允許同一局域網(wǎng)內(nèi)的其他設(shè)備(如手機、平板)通過瀏覽器訪問這個 HTML 頁面。
- 提供一個具備現(xiàn)代功能的網(wǎng)頁瀏覽界面,例如圖片懶加載、點擊縮略圖彈出大圖預覽、以及在大圖模式下切換圖片等。
核心技術(shù)棧
Python 3: 作為主要的編程語言。
wxPython: 一個跨平臺的 Python GUI 工具庫,用于創(chuàng)建桌面應(yīng)用程序窗口。
http.server & socketserver: Python 標準庫,用于創(chuàng)建基礎(chǔ)的 HTTP Web 服務(wù)器。
threading: 用于在后臺線程中運行 HTTP 服務(wù)器,避免阻塞 GUI 界面。
socket: 用于獲取本機的局域網(wǎng) IP 地址。
os & pathlib: 用于文件系統(tǒng)操作(列出目錄、檢查文件、獲取路徑、大小等)。pathlib 被導入但實際未使用,代碼主要使用了 os.path。
webbrowser: 用于在腳本啟動服務(wù)后自動打開默認瀏覽器訪問頁面。
mimetypes: 用于猜測圖片文件的 MIME 類型(如 image/jpeg),以便瀏覽器正確顯示。
HTML, CSS, JavaScript: 用于構(gòu)建用戶在瀏覽器中看到的圖片瀏覽前端界面。
代碼深度解析
讓我們逐一拆解腳本的關(guān)鍵組成部分:
1. 導入模塊與全局變量
import wx import os import http.server import socketserver import threading import socket import webbrowser from pathlib import Path # 導入但未使用 import mimetypes # 全局變量,用于存儲選擇的圖片文件夾路徑 selected_folder = "" server_thread = None server_instance = None
腳本首先導入了所有必需的庫。
定義了三個全局變量:
- selected_folder: 存儲用戶通過 GUI 選擇的圖片文件夾路徑。
- server_thread: 用于保存運行 HTTP 服務(wù)器的線程對象。
- server_instance: 用于保存實際的 TCPServer 服務(wù)器實例。
在這個場景下使用全局變量簡化了狀態(tài)管理,但在更復雜的應(yīng)用中可能需要更精細的狀態(tài)管理機制。
2. 自定義 HTTP 請求處理器 (ImageHandler)
class ImageHandler(http.server.SimpleHTTPRequestHandler): def __init__(self, *args, **kwargs): # 確保每次請求都使用最新的文件夾路徑 global selected_folder # 將directory參數(shù)傳遞給父類的__init__方法 super().__init__(directory=selected_folder, *args, **kwargs) def do_GET(self): # ... (處理 "/" 根路徑請求,生成 HTML 頁面) ... # ... (處理 "/images/..." 圖片文件請求) ... # ... (處理其他路徑,返回 404) ...
這個類繼承自 http.server.SimpleHTTPRequestHandler,它提供了處理靜態(tài)文件請求的基礎(chǔ)功能。
__init__ (構(gòu)造函數(shù)): 這是個關(guān)鍵點。每次處理新的 HTTP 請求時,這個構(gòu)造函數(shù)都會被調(diào)用。它會讀取當前的 selected_folder 全局變量的值,并將其作為 directory 參數(shù)傳遞給父類的構(gòu)造函數(shù)。這意味著服務(wù)器始終從 GUI 中最新選擇的文件夾提供服務(wù)。(注意:當前代碼邏輯下,用戶選擇新文件夾后需要重新點擊“啟動服務(wù)器”按鈕才會生效)。
do_GET 方法: 這個方法負責處理所有傳入的 HTTP GET 請求。
請求根路徑 (/):
1.當用戶訪問服務(wù)器的根地址時(例如 http://<ip>:8000/),此部分代碼被執(zhí)行。
2.它會掃描 selected_folder 文件夾,找出所有具有常見圖片擴展名(如 .jpg, .png, .gif 等)的文件。
3.計算每個圖片文件的大?。ㄞD(zhuǎn)換為 MB 或 KB)。
4.按文件名對圖片列表進行字母排序。
5.動態(tài)生成一個完整的 HTML 頁面,頁面內(nèi)容包括:
CSS 樣式: 定義了頁面的外觀,包括響應(yīng)式的網(wǎng)格布局 (.gallery)、圖片容器樣式、用于大圖預覽的模態(tài)彈出框 (.modal)、導航按鈕、加載指示器以及圖片懶加載的淡入效果。
HTML 結(jié)構(gòu): 包含一個標題 (<h1>)、一個加載進度條 (<div>)、一個圖片畫廊區(qū)域 (<div class="gallery">),其中填充了每個圖片項(包含一個 img 標簽用于懶加載、圖片文件名和文件大小),以及模態(tài)框的 HTML 結(jié)構(gòu)。
JavaScript 腳本: 實現(xiàn)了前端的交互邏輯:
- 圖片懶加載 (Lazy Loading): 利用現(xiàn)代瀏覽器的 IntersectionObserver API(并為舊瀏覽器提供后備方案),僅當圖片滾動到可視區(qū)域時才加載其 src,極大地提高了包含大量圖片時的初始頁面加載速度。同時,還實現(xiàn)了一個簡單的加載進度條。
- 模態(tài)框預覽: 當用戶點擊任意縮略圖時,會彈出一個覆蓋全屏的模態(tài)框,顯示對應(yīng)的大圖。
- 圖片導航: 在模態(tài)框中,用戶可以通過點擊“上一張”/“下一張”按鈕,或使用鍵盤的左右箭頭鍵來切換瀏覽圖片。按 Escape 鍵可以關(guān)閉模態(tài)框。
- 圖片預加載: 在打開模態(tài)框顯示某張圖片時,腳本會嘗試預加載其相鄰(上一張和下一張)的圖片,以提升導航切換時的流暢度。
6.最后,服務(wù)器將生成的 HTML 頁面內(nèi)容連同正確的 HTTP 頭部(Content-Type: text/html, Cache-Control 設(shè)置為緩存 1 小時)發(fā)送給瀏覽器。
請求圖片路徑 (/images/...):
- 當瀏覽器請求的路徑以 /images/ 開頭時(這是 HTML 中 <img> 標簽的 src 指向的路徑),服務(wù)器認為它是在請求一個具體的圖片文件。
- 代碼從路徑中提取出圖片文件名,并結(jié)合 selected_folder 構(gòu)建出完整的文件系統(tǒng)路徑。
- 檢查該文件是否存在且確實是一個文件。
- 使用 mimetypes.guess_type 來推斷文件的 MIME 類型(例如 image/jpeg),并為 PNG 和未知類型提供回退。
- 將圖片文件的二進制內(nèi)容讀取出來,并連同相應(yīng)的 HTTP 頭部(Content-Type, Content-Length, Cache-Control 設(shè)置為緩存 1 天以提高性能, Accept-Ranges 表示支持范圍請求)發(fā)送給瀏覽器。
請求其他路徑:
對于所有其他無法識別的請求路徑,服務(wù)器返回 404 “File not found” 錯誤。
3. 啟動服務(wù)器函數(shù) (start_server)
def start_server(port=8000): global server_instance # 設(shè)置允許地址重用,解決端口被占用的問題 socketserver.TCPServer.allow_reuse_address = True # 創(chuàng)建服務(wù)器實例 server_instance = socketserver.TCPServer(("", port), ImageHandler) server_instance.serve_forever()
這個函數(shù)被設(shè)計用來在一個單獨的線程中運行。
socketserver.TCPServer.allow_reuse_address = True 是一個重要的設(shè)置,它允許服務(wù)器在關(guān)閉后立即重新啟動時可以快速重用相同的端口,避免常見的“地址已被使用”錯誤。
它創(chuàng)建了一個 TCPServer 實例,監(jiān)聽本機的所有網(wǎng)絡(luò)接口 ("") 上的指定端口(默認為 8000),并指定使用我們自定義的 ImageHandler 類來處理所有接收到的請求。
server_instance.serve_forever() 啟動了服務(wù)器的主循環(huán),持續(xù)監(jiān)聽和處理連接請求,直到 shutdown() 方法被調(diào)用。
4. 獲取本機 IP 函數(shù) (get_local_ip)
def get_local_ip(): try: # 創(chuàng)建一個臨時套接字連接到外部地址,以獲取本機IP s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) s.connect(("8.8.8.8", 80)) # 連接到一個公共地址(如谷歌DNS),無需實際發(fā)送數(shù)據(jù) ip = s.getsockname()[0] # 獲取用于此連接的本地套接字地址 s.close() return ip except: return "127.0.0.1" # 如果獲取失敗,返回本地回環(huán)地址
這是一個實用工具函數(shù),用于查找運行腳本的計算機在局域網(wǎng)中的 IP 地址。這對于告訴用戶(以及其他設(shè)備)應(yīng)該訪問哪個 URL 非常重要。
它使用了一個常用技巧:創(chuàng)建一個 UDP 套接字,并嘗試“連接”(這并不會實際發(fā)送數(shù)據(jù))到一個已知的外部 IP 地址(例如 Google 的公共 DNS 服務(wù)器 8.8.8.8)。操作系統(tǒng)為了完成這個(虛擬的)連接,會確定應(yīng)該使用哪個本地 IP 地址,然后我們就可以通過 getsockname() 獲取這個地址。
如果嘗試獲取 IP 失?。ɡ?,沒有網(wǎng)絡(luò)連接),它會回退到返回 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
標準的 wx.App 子類。它的 OnInit 方法負責創(chuàng)建并顯示主應(yīng)用程序窗口 (PhotoServerFrame)。
PhotoServerFrame (主窗口類):
class PhotoServerFrame(wx.Frame): def __init__(self, title, size): # ... 創(chuàng)建界面控件 (文本框, 按鈕, 靜態(tài)文本) ... # ... 使用 wx.BoxSizer 進行布局管理 ... # ... 綁定事件處理函數(shù) (on_browse, on_start_server, on_stop_server, on_close) ... # ... 初始化設(shè)置 (禁用停止按鈕, 顯示歡迎信息) ... def on_browse(self, event): # ... 彈出文件夾選擇對話框 (wx.DirDialog) ... # ... 更新全局變量 selected_folder 和界面上的文本框 ... def on_start_server(self, event): # ... 檢查是否已選擇文件夾 ... # ... 如果服務(wù)器已運行,先停止舊的再啟動新的(實現(xiàn)簡單的重啟邏輯)... # ... 在新的后臺守護線程 (daemon thread) 中啟動服務(wù)器 ... # ... 獲取本機 IP, 更新界面按鈕狀態(tài), 在狀態(tài)區(qū)記錄日志, 自動打開瀏覽器 ... # ... 包含基本的錯誤處理 ... 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() 允許默認的窗口關(guān)閉行為繼續(xù)執(zhí)行 ...
這個類定義了應(yīng)用程序的主窗口。
__init__: 創(chuàng)建所有的可視化元素:一個只讀文本框顯示選定的文件夾路徑,“選擇文件夾” 按鈕,“啟動服務(wù)器” 和 “停止服務(wù)器” 按鈕,以及一個多行只讀文本框用于顯示服務(wù)器狀態(tài)和日志信息。它還使用 wx.BoxSizer 來組織這些控件的布局,并綁定了按鈕點擊事件和窗口關(guān)閉事件到相應(yīng)的方法。初始時,“停止服務(wù)器”按鈕是禁用的。
on_browse: 處理 “選擇文件夾” 按鈕的點擊事件。它會彈出一個標準的文件夾選擇對話框。如果用戶選擇了文件夾并確認,它會更新 selected_folder 全局變量,并將路徑顯示在界面文本框中,同時記錄一條日志。
on_start_server: 處理 “啟動服務(wù)器” 按鈕的點擊事件。
- 首先檢查用戶是否已經(jīng)選擇了文件夾。
- 檢查服務(wù)器是否已在運行。如果是,它會先嘗試 shutdown() 當前服務(wù)器實例并等待線程結(jié)束,然后才啟動新的服務(wù)器線程(提供了一種重啟服務(wù)的方式)。
- 創(chuàng)建一個新的 threading.Thread 來運行 start_server 函數(shù)。將線程設(shè)置為 daemon=True,這樣主程序退出時,這個后臺線程也會自動結(jié)束。
- 調(diào)用 get_local_ip() 獲取本機 IP。
- 更新 GUI 按鈕的狀態(tài)(禁用“啟動”和“選擇文件夾”,啟用“停止”)。
- 在狀態(tài)文本框中打印服務(wù)器已啟動、IP 地址、端口號以及供手機訪問的 URL。
- 使用 webbrowser.open() 自動在用戶的默認瀏覽器中打開服務(wù)器地址。
- 包含了一個 try...except 塊來捕獲并顯示啟動過程中可能出現(xiàn)的錯誤。
on_stop_server: 處理 “停止服務(wù)器” 按鈕的點擊事件。
- 如果服務(wù)器實例存在 (server_instance 不為 None),調(diào)用 server_instance.shutdown() 來請求服務(wù)器停止。shutdown() 會使 serve_forever() 循環(huán)退出。
- 等待服務(wù)器線程 (server_thread) 結(jié)束(使用 join() 并設(shè)置了短暫的超時)。
- 重置全局變量 server_instance 和 server_thread 為 None。
- 更新 GUI 按鈕狀態(tài)(啟用“啟動”和“選擇文件夾”,禁用“停止”)。
- 記錄服務(wù)器已停止的日志。
log_status: 一個簡單的輔助方法,將傳入的消息追加到狀態(tài)文本框 self.status_txt 中,并在末尾添加換行符。
on_close: 當用戶點擊窗口的關(guān)閉按鈕時觸發(fā)。它會檢查服務(wù)器是否仍在運行,如果是,則嘗試調(diào)用 shutdown() 來關(guān)閉服務(wù)器,以確保資源被正確釋放。
event.Skip() 允許 wxPython 繼續(xù)執(zhí)行默認的窗口關(guān)閉流程。
6. 程序入口 (if __name__ == "__main__":)
if __name__ == "__main__": app = PhotoServerApp(False) app.MainLoop()
這是標準的 Python 腳本入口點。
它創(chuàng)建了 PhotoServerApp 的實例。
調(diào)用 app.MainLoop() 啟動了 wxPython 的事件循環(huán)。這個循環(huán)會監(jiā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 # 實際未使用 os.path import mimetypes # 全局變量,用于存儲選擇的圖片文件夾路徑 selected_folder = "" server_thread = None server_instance = None # 自定義HTTP請求處理器 class ImageHandler(http.server.SimpleHTTPRequestHandler): def __init__(self, *args, **kwargs): # 確保每次請求都使用最新的文件夾路徑 global selected_folder # 將directory參數(shù)傳遞給父類的__init__方法 # 注意:SimpleHTTPRequestHandler 在 Python 3.7+ 才接受 directory 參數(shù) # 如果在更早版本運行,需要修改此處的實現(xiàn)方式(例如,在 do_GET 中處理路徑) super().__init__(directory=selected_folder, *args, **kwargs) def do_GET(self): # 使用 os.path.join 來確保路徑分隔符正確 requested_path = os.path.normpath(self.translate_path(self.path)) if self.path == "/": # 顯示圖片列表的主頁 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小時,提高加載速度 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"錯誤:目錄 '{current_directory}' 不存在或不是一個目錄。".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: # 獲取文件大小用于顯示預加載信息 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"獲取文件大小出錯: {file} - {str(e)}") except Exception as e: self.log_error(f"讀取目錄出錯: {current_directory} - {str(e)}") # 可以向瀏覽器發(fā)送一個錯誤信息 self.wfile.write(f"讀取目錄時發(fā)生錯誤: {str(e)}".encode('utf-8')) return # 按文件名排序 (考慮自然排序可能更好,如 '1.jpg', '2.jpg', '10.jpg') image_files.sort(key=lambda x: x[0].lower()) # 生成HTML頁面 # 使用 f-string 或模板引擎生成 HTML 會更清晰 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 來編碼文件名,防止特殊字符問題 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="預覽圖片"> <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 # 啟動HTTP服務(wù)器 def start_server(port=8000): global server_instance # 設(shè)置允許地址重用,解決端口被占用的問題 socketserver.TCPServer.allow_reuse_address = True try: # 創(chuàng)建服務(wù)器實例 server_instance = socketserver.TCPServer(("", port), ImageHandler) print(f"服務(wù)器啟動于端口 {port}...") server_instance.serve_forever() print("服務(wù)器已停止。") # This line will be reached after shutdown() except OSError as e: print(f"!!! 啟動服務(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"!!! 啟動服務(wù)器時發(fā)生意外錯誤: {e}") server_instance = None # 獲取本機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"無法自動獲取本機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="啟動服務(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 進行布局 --- # 主垂直 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) # 讓文本框擴展 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)標簽和文本框 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ù)器!請選擇一個包含圖片的文件夾,然后啟動服務(wù)器。") def on_browse(self, event): # 彈出文件夾選擇對話框 # 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("請先選擇一個有效的圖片文件夾!", "錯誤", wx.OK | wx.ICON_ERROR, self) return # 檢查服務(wù)器是否已經(jīng)在運行 (更可靠的方式是檢查 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)在運行中。請先停止。") # wx.MessageBox("服務(wù)器已經(jī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"正在嘗試啟動服務(wù)器在端口 {port}...") try: # 清理舊線程引用 (以防萬一) if server_thread and not server_thread.is_alive(): server_thread = None # 創(chuà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ù)器是否啟動成功 --- # 這是一種簡單的方法,更健壯的是使用事件或隊列從線程通信 threading.Timer(0.5, self.check_server_status_after_start, args=(port,)).start() except Exception as e: self.log_status(f"!!! 啟動服務(wù)器線程時出錯: {str(e)}") wx.MessageBox(f"啟動服務(wù)器線程時出錯: {str(e)}", "嚴重錯誤", 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ù)器已成功啟動!") self.log_status(f"本機 IP 地址: {ip_address}") self.log_status(f"端口: {port}") self.log_status(f"請在瀏覽器中訪問: {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"自動打開瀏覽器失敗: {wb_e}") wx.CallAfter(update_gui_success) else: def update_gui_failure(): self.log_status("!!! 服務(wù)器未能成功啟動,請檢查端口是否被占用或查看控制臺輸出。") # 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ù)器時出錯: {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ù)器線程未能及時停止。") 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ù)器時發(fā)生錯誤: {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ù)器當前未運行。") # 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)閉窗口時確保服務(wù)器也被關(guān)閉 if server_instance and server_thread and server_thread.is_alive(): msg_box = wx.MessageDialog(self, "服務(wù)器仍在運行。是否停止服務(wù)器并退出?", "確認退出", 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ù)器,請手動檢查。", "警告", 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"無法設(shè)置 DPI 感知: {e}") app = PhotoServerApp(redirect=False) # redirect=False for easier debugging output app.MainLoop()
工作流程
用戶使用這個工具的典型流程如下:
- 運行 Python 腳本。
- 出現(xiàn)一個帶有 “圖片服務(wù)器” 標題的窗口。
- 點擊 “選擇文件夾” 按鈕,在彈出的對話框中找到并選擇一個包含圖片的文件夾。
- 選中的文件夾路徑會顯示在文本框中。
- 點擊 “啟動服務(wù)器” 按鈕。
- 腳本獲取本機 IP 地址,在后臺啟動 HTTP 服務(wù)器。
- 狀態(tài)日志區(qū)域會顯示服務(wù)器已啟動、本機 IP 地址和端口號(通常是 8000),并提示用戶可以通過 http://<本機IP>:8000 訪問。
- 腳本會自動打開系統(tǒng)的默認瀏覽器,并訪問上述地址。
- 瀏覽器中會顯示一個包含所選文件夾中所有圖片縮略圖的網(wǎng)頁。圖片會隨著滾動懶加載。
- 用戶可以在瀏覽器中滾動瀏覽縮略圖。
- 點擊任意縮略圖,會彈出一個大圖預覽模態(tài)框。
- 在模態(tài)框中,可以使用左右箭頭或點擊兩側(cè)按鈕切換圖片。
- 在桌面應(yīng)用程序窗口中,點擊 “停止服務(wù)器” 可以關(guān)閉后臺服務(wù)。
- 關(guān)閉桌面應(yīng)用程序窗口時,后臺服務(wù)也會自動嘗試停止。
主要功能與優(yōu)勢
簡單易用: 提供圖形界面,操作直觀。
本地網(wǎng)絡(luò)共享: 輕松將電腦上的圖片共享給局域網(wǎng)內(nèi)的手機、平板等設(shè)備瀏覽。
無需安裝額外服務(wù)器軟件: 利用 Python 內(nèi)建庫,綠色便攜。
跨平臺潛力: Python 和 wxPython 都是跨平臺的,理論上可以在 Windows, macOS, Linux 上運行(需安裝相應(yīng)依賴)。
現(xiàn)代化的 Web 界面: 提供了懶加載、模態(tài)預覽、鍵盤導航等功能,提升了瀏覽體驗。
性能考慮: 通過懶加載和 HTTP 緩存(針對圖片文件設(shè)置了 1 天緩存,HTML 頁面 1 小時緩存)來優(yōu)化性能。
潛在改進與思考
雖然這個腳本已經(jīng)相當實用,但仍有一些可以改進的地方:
更健壯的錯誤處理: 對文件讀取、網(wǎng)絡(luò)錯誤等進行更細致的處理和用戶反饋。
安全性: 目前服務(wù)器對局域網(wǎng)內(nèi)的所有設(shè)備開放,沒有任何訪問控制。對于敏感圖片,可能需要添加密碼驗證等安全措施。
處理超大目錄: 如果文件夾包含成千上萬張圖片,一次性讀取所有文件名和大小可能仍然會造成短暫卡頓,可以考慮分批加載或更優(yōu)化的目錄掃描方式。
可配置端口: 將端口號 8000 硬編碼在了代碼中,可以將其改為用戶可在界面上配置或通過命令行參數(shù)指定。
支持更多文件類型: 目前只處理了常見的圖片格式,可以擴展支持視頻預覽或其他媒體類型。
異步服務(wù)器: 對于高并發(fā)場景(雖然在本應(yīng)用中不太可能),可以考慮使用基于 asyncio 的 Web 框架(如 aiohttp, FastAPI 等)代替 socketserver,以獲得更好的性能。
界面美化: wxPython 界面和 HTML 界面都可以進一步美化。
運行結(jié)果
總結(jié)
這個 Python 腳本是一個非常實用的小工具,它完美地結(jié)合了桌面 GUI 的易用性和 Web 技術(shù)的靈活性,為在本地網(wǎng)絡(luò)中快速瀏覽電腦上的圖片提供了一個優(yōu)雅的解決方案。代碼結(jié)構(gòu)清晰,功能完善,并且展示了 Python 在快速開發(fā)網(wǎng)絡(luò)應(yīng)用方面的強大能力。無論你是想學習 GUI 編程、網(wǎng)絡(luò)服務(wù),還是僅僅需要這樣一個方便的工具,這個項目都值得一看。
以上就是使用Python開發(fā)一個簡單的本地圖片服務(wù)器的詳細內(nèi)容,更多關(guān)于Python本地圖片服務(wù)器的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
用Python實現(xiàn)數(shù)據(jù)篩選與匹配實例
大家好,本篇文章主要講的是用Python實現(xiàn)數(shù)據(jù)篩選與匹配實例,感興趣的同學趕快來看一看吧,對你有幫助的話記得收藏一下2022-02-02Python實例方法、類方法、靜態(tài)方法區(qū)別詳解
這篇文章主要介紹了Python實例方法、類方法、靜態(tài)方法區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09python實現(xiàn)對excel表中的某列數(shù)據(jù)進行排序的代碼示例
這篇文章主要給大家介紹了如何使用python實現(xiàn)對excel表中的某列數(shù)據(jù)進行排序,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-11-11