如何在Python Tkinter函数内访问图片变量并实现图像动画？

问题描述 #

我用Python的Tkinter开发GUI程序，需求是：

• 选择两张JPG/PNG图片，调整尺寸后分别显示在两个方形画布中
• 点击第三个画布下方的按钮，基于两张图片做序列转场动画

目前能正常导入并显示图片，但在按钮绑定的函数中访问全局图片变量转像素数组时，编译器提示变量无值。我不想再次调用选图函数（会重复弹出文件选择窗口），需要同时实现：

1. 点击按钮选择并导入图片
2. 访问已导入的图片变量执行动画逻辑

附现有代码：

from tkinter import *
from tkinter import filedialog
from PIL import Image, ImageTk
from tkinter import Canvas
from numpy import asarray
import numpy as np

window = Tk()
window.title("Image Transitions")
window.geometry("1200x800")
window.config(background="CornflowerBlue")
window.maxsize(1200, 800)

title1 = Label(window, text="Image 1", width=20)
title1.place(x=180, y=175)
title1.configure(bg="CornflowerBlue")

title2 = Label(window, text="Image 2", width=20)
title2.place(x=530, y=175)
title2.configure(bg="CornflowerBlue")

title3 = Label(window, text="Image Transitions", width=20)
title3.place(x=880, y=175)
title3.configure(bg="CornflowerBlue")

button1 = Button(window, text="Upload Image 1", width=20, command=lambda:browse_Image1())
button1.place(x=180, y=510)

button2 = Button(window, text="Upload Image 2", width=20, command=lambda:browse_Image2())
button2.place(x=530, y=510)

canvas1 = Canvas(window, width=300, height=300)
canvas1.pack()
canvas1.configure(bg="LightSkyBlue")
canvas1.place(x=100, y=200)

canvas2 = Canvas(window, width=300, height=300)
canvas2.pack()
canvas2.configure(bg="LightSkyBlue")
canvas2.place(x=450, y=200)

canvas3 = Canvas(window, width=300, height=300)
canvas3.pack()
canvas3.configure(bg="LightSkyBlue")
canvas3.place(x=800, y=200)

def browse_Image1():
    global image_first

    filename = filedialog.askopenfilename(
    initialdir = "/",
    title = "Select a File",
    filetypes = (("2D - JPG", "*.jpg*"), ("2D - PNG", "*.png*"), ("all files", "*.*")))
    
    img = Image.open(filename)
    img = img.resize((300, 300))
    image_first = ImageTk.PhotoImage(img)

    label = Label(window, image=image_first)
    label.pack()
    label.place(x=100, y=200)

def browse_Image2():
    global image_second
    filename = filedialog.askopenfilename(
    initialdir = "/",
    title = "Select a File",
    filetypes = (("2D - JPG", "*.jpg*"), ("2D - PNG", "*.png*"), ("all files", "*.*")))

    img2 = Image.open(filename)
    img2 = img.resize((300, 300))
    image_second = ImageTk.PhotoImage(img2)

    label = Label(window, image=image_second)
    label.pack()
    label.place(x=450, y=200)

ImageA_Width, ImageA_Height = image_first.size
data_A_norm = asarray(image_first) / 255.0
data_B_norm = asarray(image_second) / 255.0

window.mainloop()

解决方案 #

核心问题分析 #

1. 全局变量初始化时机错误：程序启动时直接访问image_first和image_second，但这两个变量要等点击按钮调用选图函数后才会赋值，此时变量不存在必然报错。
2. 存储对象错误：你把仅用于Tkinter显示的ImageTk.PhotoImage存在全局变量里，而做像素数组转换需要保留PIL的原始Image对象。
3. 代码bug：browse_Image2里误用了img.resize，应该是img2.resize。
4. 显示方式不规范：用Label覆盖Canvas的方式不合理，直接在Canvas上创建图像更合适。

修改步骤 #

1. 初始化全局PIL Image对象：定义全局变量img1和img2，初始值为None，用于存储原始PIL图像。
2. 修正选图函数逻辑：选图后先保存PIL的Image对象，再转换成ImageTk.PhotoImage用于Canvas显示。
3. 使用Canvas显示图片：调用Canvas的create_image方法绘制图片，避免Label覆盖问题。
4. 新增动画触发按钮：绑定动画函数，先检查两张图片是否已加载，再转换为numpy数组执行动画逻辑。

修改后的完整代码 #

from tkinter import *
from tkinter import filedialog
from PIL import Image, ImageTk
from numpy import asarray
import numpy as np

window = Tk()
window.title("Image Transitions")
window.geometry("1200x800")
window.config(background="CornflowerBlue")
window.maxsize(1200, 800)

# 初始化全局PIL图像变量，用于后续像素处理
img1 = None
img2 = None

title1 = Label(window, text="Image 1", width=20, bg="CornflowerBlue")
title1.place(x=180, y=175)

title2 = Label(window, text="Image 2", width=20, bg="CornflowerBlue")
title2.place(x=530, y=175)

title3 = Label(window, text="Image Transitions", width=20, bg="CornflowerBlue")
title3.place(x=880, y=175)

button1 = Button(window, text="Upload Image 1", width=20, command=browse_Image1)
button1.place(x=180, y=510)

button2 = Button(window, text="Upload Image 2", width=20, command=browse_Image2)
button2.place(x=530, y=510)

# 动画触发按钮
animate_btn = Button(window, text="Start Transition", width=20, command=start_transition)
animate_btn.place(x=880, y=510)

canvas1 = Canvas(window, width=300, height=300, bg="LightSkyBlue")
canvas1.place(x=100, y=200)

canvas2 = Canvas(window, width=300, height=300, bg="LightSkyBlue")
canvas2.place(x=450, y=200)

canvas3 = Canvas(window, width=300, height=300, bg="LightSkyBlue")
canvas3.place(x=800, y=200)

def browse_Image1():
    global img1
    filename = filedialog.askopenfilename(
        initialdir="/",
        title="Select a File",
        filetypes=(("JPG Files", "*.jpg"), ("PNG Files", "*.png"), ("All Files", "*.*"))
    )
    if not filename:
        return
    
    # 保存PIL原始图像对象
    img1 = Image.open(filename).resize((300, 300))
    # 转换为Tkinter可用的PhotoImage
    tk_img = ImageTk.PhotoImage(img1)
    # 在canvas1上显示图片，保留引用避免被垃圾回收
    canvas1.image = tk_img
    canvas1.create_image(150, 150, image=tk_img)

def browse_Image2():
    global img2
    filename = filedialog.askopenfilename(
        initialdir="/",
        title="Select a File",
        filetypes=(("JPG Files", "*.jpg"), ("PNG Files", "*.png"), ("All Files", "*.*"))
    )
    if not filename:
        return
    
    # 修正之前的resize变量错误
    img2 = Image.open(filename).resize((300, 300))
    tk_img = ImageTk.PhotoImage(img2)
    canvas2.image = tk_img
    canvas2.create_image(150, 150, image=tk_img)

def start_transition():
    # 检查两张图片是否已加载
    if img1 is None or img2 is None:
        print("请先上传两张图片")
        return
    
    # 转换为numpy像素数组并归一化
    data_A_norm = asarray(img1) / 255.0
    data_B_norm = asarray(img2) / 255.0
    
    # 这里添加你的转场动画逻辑
    print("图片像素数组已准备完成，可以执行动画")
    print(f"图片A尺寸：{data_A_norm.shape}")
    print(f"图片B尺寸：{data_B_norm.shape}")

window.mainloop()

关键说明 #

• 全局变量img1和img2存储的是PIL的Image对象，可直接用于numpy转换，不会丢失像素信息。
• 在Canvas显示图片时，通过canvas1.image = tk_img保留PhotoImage的引用，避免Tkinter的垃圾回收机制导致图片消失。
• start_transition函数先检查图片是否加载完成，再执行像素转换和动画逻辑，避免空变量报错。

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