Tkinter实现点击缩略图在同屏显示大图的GUI开发需求

关键修改步骤 #

1. 初始化大图显示区域 #

在edit_window_init方法中添加右侧的大图展示框架，用于放置显示大图的标签：

def edit_window_init(self):
    self.edit_window = Toplevel()
    self.edit_window.title("Edit")
    self.edit_window.geometry('1200x800')
    self.edit_window.resizable(False,False)
    self.background_color = "#F8F1F1"
    self.my_font_color = "#0A065D"
    self.my_font = 'Poppins'
    
    # 添加大图显示区域
    self.main_display_frame = Frame(self.edit_window, bg=self.background_color)
    self.main_display_frame.pack(side="right", fill=BOTH, expand=1)
    self.large_image_label = Label(self.main_display_frame, bg=self.background_color)
    self.large_image_label.pack(expand=True, anchor="center")

2. 为缩略图绑定点击事件 #

修改display_selected_images方法中的循环逻辑，给每个缩略图标签绑定左键点击事件，并传递对应图片的路径：

def display_selected_images(self):
    # CREATE A MAIN FRAME
    thumbnail_main_frame= Frame(self.edit_window, height=1200,width=300)
    thumbnail_main_frame.pack(side="left", fill=BOTH,expand=1)
    # CREATE A CANVAS
    thumbnail_canvas = Canvas(thumbnail_main_frame)
    thumbnail_canvas.pack(side="left", fill=BOTH,expand=1)
    # ADD SCROLL BAR TO THE CANVAS
    myscrollbar = Scrollbar(thumbnail_canvas, orient="vertical",command=thumbnail_canvas.yview)
    myscrollbar.pack(side="right",fill=Y)
    # CONFIGURE THE CANVAS
    thumbnail_canvas.configure(yscrollcommand=myscrollbar.set)
    thumbnail_canvas.bind("<Configure>",lambda e:thumbnail_canvas.configure(scrollregion=thumbnail_canvas.bbox("all")))

    # TODO 3.1: PUT ALL SELECTED IMAGES THUMBNAIL TO LEFT HAND SIDE OF THE EDIT SCREEN
    # CREATE ANOTHER FRAME INSIDE OF THE CANVAS
    thumbnail_subframe=Frame(thumbnail_canvas)
    # ADD THIS NEW FRAME TO A WINDOW IN THE CANVAS
    thumbnail_canvas.create_window((0,0), width=300,window=thumbnail_subframe,anchor="nw")
    
    # 修改循环，为缩略图绑定点击事件
    for selected_image_directory in self.file_directory_list:
        selected_image=Image.open(selected_image_directory).resize((240,140))
        thumbnail_img = ImageTk.PhotoImage(selected_image)
        self.image_temporary_memory.append(thumbnail_img)
        
        # 创建标签并绑定点击事件
        thumbnail_label = Label(thumbnail_subframe, image=thumbnail_img)
        thumbnail_label.grid(pady=5, padx=30)
        # 绑定左键点击，触发大图显示方法，传递图片路径
        thumbnail_label.bind("<Button-1>", lambda e, path=selected_image_directory: self.show_large_image(path))

3. 实现大图显示逻辑 #

新增show_large_image方法，负责加载原图、按比例缩放适配显示区域，并更新到大图标签中：

def show_large_image(self, image_path):
    # 打开原图
    original_img = Image.open(image_path)
    # 获取显示区域的有效尺寸
    frame_width = self.main_display_frame.winfo_width()
    frame_height = self.main_display_frame.winfo_height()
    
    # 计算等比例缩放的比例
    scale = min(frame_width / original_img.width, frame_height / original_img.height)
    # 计算缩放后的尺寸
    new_size = (int(original_img.width * scale), int(original_img.height * scale))
    # 缩放图片（使用LANCZOS算法保证清晰度）
    resized_img = original_img.resize(new_size, Image.Resampling.LANCZOS)
    
    # 转换为Tkinter兼容格式
    self.large_img_tk = ImageTk.PhotoImage(resized_img)
    # 更新标签显示
    self.large_image_label.config(image=self.large_img_tk)
    # 保存引用，避免图片被垃圾回收机制销毁
    self.large_image_label.image = self.large_img_tk

完整修改后代码 #

# TODO 0: IMPORT REQUIRED LIBRARIES AND MODULES
from tkinter import *
from PIL import Image, ImageTk


# TODO 1: CREATE A CLASS
class EditScreen:
    def __init__(self, file_directory_list):
        self.edit_window_init()
        self.file_directory_list = list(file_directory_list)
        self.image_temporary_memory=[]
        self.display_selected_images()
        self.edit_window.mainloop()

    # TODO 2: CREATE A NEW EDIT SCREEN
    def edit_window_init(self):
        self.edit_window = Toplevel()
        self.edit_window.title("Edit")
        self.edit_window.geometry('1200x800')
        self.edit_window.resizable(False,False)
        self.background_color = "#F8F1F1"
        self.my_font_color = "#0A065D"
        self.my_font = 'Poppins'
        
        # 添加大图显示区域
        self.main_display_frame = Frame(self.edit_window, bg=self.background_color)
        self.main_display_frame.pack(side="right", fill=BOTH, expand=1)
        self.large_image_label = Label(self.main_display_frame, bg=self.background_color)
        self.large_image_label.pack(expand=True, anchor="center")

    # TODO 3: DISPLAY SELECTED IMAGES IN THIS SCREEN
    def display_selected_images(self):
        # CREATE A MAIN FRAME
        thumbnail_main_frame= Frame(self.edit_window, height=1200,width=300)
        thumbnail_main_frame.pack(side="left", fill=BOTH,expand=1)
        # CREATE A CANVAS
        thumbnail_canvas = Canvas(thumbnail_main_frame)
        thumbnail_canvas.pack(side="left", fill=BOTH,expand=1)
        # ADD SCROLL BAR TO THE CANVAS
        myscrollbar = Scrollbar(thumbnail_canvas, orient="vertical",command=thumbnail_canvas.yview)
        myscrollbar.pack(side="right",fill=Y)
        # CONFIGURE THE CANVAS
        thumbnail_canvas.configure(yscrollcommand=myscrollbar.set)
        thumbnail_canvas.bind("<Configure>",lambda e:thumbnail_canvas.configure(scrollregion=thumbnail_canvas.bbox("all")))

        # TODO 3.1: PUT ALL SELECTED IMAGES THUMBNAIL TO LEFT HAND SIDE OF THE EDIT SCREEN
        # CREATE ANOTHER FRAME INSIDE OF THE CANVAS
        thumbnail_subframe=Frame(thumbnail_canvas)
        # ADD THIS NEW FRAME TO A WINDOW IN THE CANVAS
        thumbnail_canvas.create_window((0,0), width=300,window=thumbnail_subframe,anchor="nw")
        
        for selected_image_directory in self.file_directory_list:
            selected_image=Image.open(selected_image_directory).resize((240,140))
            thumbnail_img = ImageTk.PhotoImage(selected_image)
            self.image_temporary_memory.append(thumbnail_img)
            
            # 创建标签并绑定点击事件
            thumbnail_label = Label(thumbnail_subframe, image=thumbnail_img)
            thumbnail_label.grid(pady=5, padx=30)
            # 绑定左键点击，触发大图显示方法
            thumbnail_label.bind("<Button-1>", lambda e, path=selected_image_directory: self.show_large_image(path))

    # 新增：显示大图的方法
    def show_large_image(self, image_path):
        original_img = Image.open(image_path)
        frame_width = self.main_display_frame.winfo_width()
        frame_height = self.main_display_frame.winfo_height()
        
        # 等比例缩放计算
        scale = min(frame_width / original_img.width, frame_height / original_img.height)
        new_size = (int(original_img.width * scale), int(original_img.height * scale))
        resized_img = original_img.resize(new_size, Image.Resampling.LANCZOS)
        
        self.large_img_tk = ImageTk.PhotoImage(resized_img)
        self.large_image_label.config(image=self.large_img_tk)
        self.large_image_label.image = self.large_img_tk
        
# TODO 4: GET THE WATERMARK TEXT

# TODO 5: MAKE CONFIGURATIONS MENU

    # TODO 5.1: SIZE

    # TODO 5.2: COLOR

    # TODO 5.3: FONT

    # TODO 5.4: LOCATION

    # TODO 5.5: OPACITY

# TODO 6: ADD OR DELETE PHOTOS

# TODO 7: SAVE THE EDITED IMAGES

内容的提问来源于stack exchange，提问作者Elentronics