使用Python构建桌面图片浏览器
在这篇博客中，我们将深入分析一个使用Python和wxPython构建的桌面图片浏览器应用。该应用通过wxPython提供图形用户界面（GUI），并结合本地Web服务器在浏览器中展示图片。我们将逐一分解代码，分析其组件，并探讨其工作原理。C:\pythoncode\new\output\PYIISHtmlJSJpegView.py
应用概述
该应用旨在让用户通过桌面GUI启动一个基于Web的界面，浏览本地文件夹中的图片。以下是其主要功能概述：
- 图形界面：使用wxPython构建的窗口，提供简单的按钮用于启动图片浏览器和退出应用。
- Web服务器：通过Python的
http.server模块运行本地HTTP服务器，提供基于HTML的图片展示页面。 - 图片展示：Web界面允许用户选择文件夹，以幻灯片形式查看图片，并支持通过按钮或键盘方向键导航。
- 跨平台支持：应用支持以脚本形式运行或打包为可执行文件（例如使用PyInstaller）。
代码集成了多个Python库，包括wx（用于GUI）、http.server和socketserver（用于Web服务器）、webbrowser（用于打开浏览器）以及threading（用于并发处理）。
代码分析
让我们逐一分析代码的关键组件，了解它们如何协同工作。
1. 常量和导入
代码首先定义了常量并导入了必要的模块：
import os
import sys
import time
import webbrowser
import threading
import http.server
import socketserver
import wx
from pathlib import PathAPP_NAME = "图片浏览器"
PORT = 8080
SERVER_THREAD = None
SERVER_STARTED = threading.Event()
HTML_FILENAME = "image_browser.html"
- 常量：
APP_NAME定义应用名称（“图片浏览器”），PORT设置默认服务器端口，HTML_FILENAME指定图片展示的HTML文件。 - 导入：使用了
wx（GUI）、http.server和socketserver（Web服务器）、threading（并发）等库。 - 线程事件：
SERVER_STARTED是一个threading.Event对象，用于标记服务器启动完成，确保浏览器在服务器启动后打开。
2. HTML文件管理
应用动态管理一个HTML文件（image_browser.html），用于定义基于Web的图片展示页面。
get_html_path()
def get_html_path():if getattr(sys, 'frozen', False):app_dir = Path(sys._MEIPASS)else:app_dir = Path(os.path.dirname(os.path.abspath(__file__)))html_path = app_dir / HTML_FILENAMEif not html_path.exists():create_html_file(html_path)return html_path
此函数确定HTML文件的路径，兼容脚本运行和打包的可执行文件。如果HTML文件不存在，则调用create_html_file()生成文件。
create_html_file()
def create_html_file(file_path):html_content = """<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>图片浏览器</title><style>/* 图片展示的CSS样式 */</style>
</head>
<body><h1>图片浏览器</h1><div class="container"><div class="file-selection"><input type="file" id="folder-input" webkitdirectory directory multiple /><label for="folder-input">选择文件夹</label></div><div class="gallery" id="gallery"><div class="no-images">请选择包含图片的文件夹</div></div><div class="image-name" id="image-name"></div><div class="navigation"><button class="nav-btn" id="prev-btn" disabled>上一张</button><button class="nav-btn" id="next-btn" disabled>下一张</button></div><div class="image-counter" id="counter">0/0</div></div><script>/* 图片展示的JavaScript逻辑 */</script>
</body>
</html>"""with open(file_path, 'w', encoding='utf-8') as f:f.write(html_content)
此函数生成一个包含以下内容的HTML文件：
- HTML结构：包括文件夹选择输入框、图片展示区域、导航按钮和计数器。
- CSS样式：提供整洁、响应式的布局，支持平滑过渡和悬停效果。
- JavaScript逻辑：处理文件夹选择、过滤图片文件、显示图片，并支持通过按钮或键盘方向键导航。
JavaScript使用FileReader API将图片加载为Data URL，避免服务器端文件访问，并通过CSS变换实现滑动展示效果。
3. HTTP服务器
应用运行一个本地HTTP服务器，用于提供HTML文件和图片。
SimpleHTTPRequestHandler
class SimpleHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):def __init__(self, *args, **kwargs):directory = str(get_html_path().parent)super().__init__(*args, directory=directory, **kwargs)def log_message(self, format, *args):pass
此自定义处理器将服务器根目录设置为HTML文件所在的文件夹，并禁用日志输出以保持控制台整洁。
start_server()
def start_server():global PORTglobal SERVER_STARTEDhandler = SimpleHTTPRequestHandlerwhile True:try:with socketserver.TCPServer(("localhost", PORT), handler) as httpd:print(f"服务器已启动在 http://localhost:{PORT}")SERVER_STARTED.set()httpd.serve_forever()breakexcept OSError as e:print(f"端口 {PORT} 被占用，尝试下一个端口...")PORT += 1if PORT > 8100:print("无法找到可用端口")return
此函数启动服务器，如果默认端口（8080）被占用，则递增端口号，直至找到可用端口（上限为8100）。服务器启动后，设置SERVER_STARTED事件。
4. 浏览器集成
open_browser()函数确保图片展示页面在用户默认浏览器中打开：
def open_browser():if SERVER_STARTED.wait(5):url = f"http://localhost:{PORT}/{HTML_FILENAME}"print(f"打开浏览器：{url}")try:webbrowser.open(url)except Exception as e:print(f"打开浏览器出错: {e}")wx.MessageBox(f"无法自动打开浏览器，请手动访问：\n{url}", "打开浏览器失败", wx.OK | wx.ICON_INFORMATION)else:print("服务器启动超时")wx.MessageBox("服务器启动失败，请重试", "错误", wx.OK | wx.ICON_ERROR)
该函数最多等待5秒以确保服务器启动，然后打开URL。如果浏览器无法打开，则显示包含URL的消息框，供用户手动访问。
5. wxPython图形界面
图形界面使用wxPython构建，提供原生的桌面交互体验。
ImageBrowserApp
class ImageBrowserApp(wx.App):def OnInit(self):self.frame = ImageBrowserFrame(None, title=APP_NAME)self.frame.Show()return True
此类初始化wxPython应用并创建主窗口。
ImageBrowserFrame
class ImageBrowserFrame(wx.Frame):def __init__(self, parent, title):super().__init__(parent, title=title, size=(400, 200))self.Centre()self.panel = wx.Panel(self)vbox = wx.BoxSizer(wx.VERTICAL)title_label = wx.StaticText(self.panel, label=APP_NAME)title_font = wx.Font(14, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL, wx.FONTWEIGHT_BOLD)title_label.SetFont(title_font)vbox.Add(title_label, 0, wx.ALL | wx.ALIGN_CENTER, 20)self.status_text = wx.StaticText(self.panel, label="准备就绪")vbox.Add(self.status_text, 0, wx.LEFT | wx.RIGHT | wx.ALIGN_CENTER, 20)self.start_button = wx.Button(self.panel, label="打开图片浏览器")vbox.Add(self.start_button, 0, wx.ALL | wx.EXPAND, 20)self.start_button.Bind(wx.EVT_BUTTON, self.on_start)self.exit_button = wx.Button(self.panel, label="退出")vbox.Add(self.exit_button, 0, wx.LEFT | wx.RIGHT | wx.BOTTOM | wx.EXPAND, 20)self.exit_button.Bind(wx.EVT_BUTTON, self.on_exit)self.panel.SetSizer(vbox)self.Bind(wx.EVT_CLOSE, self.on_exit)self.start_server()
主窗口包括：
- 标题标签。
- 状态文本（例如“准备就绪”）。
- “启动”按钮，用于打开浏览器。
- “退出”按钮，用于关闭应用。
start_server()方法在单独线程中运行HTTP服务器，并在服务器启动或失败时更新状态文本。
事件处理
on_start()：临时禁用启动按钮，在线程中打开浏览器，然后重新启用按钮。on_exit()：关闭窗口并退出应用。
6. 主函数
def main():app = ImageBrowserApp(False)app.MainLoop()if __name__ == "__main__":main()
此函数启动wxPython应用。
运行结果
