在Tkinter中显示NumPy数组图像时出现画面错乱问题

核心问题点 #

• 数组维度顺序错误：Numpy图像数组的规范格式是(height, width, 3)（行对应高度，列对应宽度），但原代码创建的是(width, height, 3)，导致图像宽高颠倒、显示变形。
• 数据类型不匹配：生成的浮点型数组（np.double）直接乘以255后仍为浮点类型，而Image.fromarray处理RGB模式时要求uint8类型的整数数组，否则会出现颜色错乱。
• PhotoImage被垃圾回收：imgarray是函数局部变量，函数执行完毕后会被Python垃圾回收，导致Canvas上的图像消失或无法显示。

修改后的完整代码 #

from skimage.draw import polygon
from PIL import Image, ImageTk

import matplotlib.pyplot as plt

import tkinter as tk
import numpy as np

def generate():
    global imgarray  # 保存全局引用，避免被垃圾回收
    # 清空画布
    canvas.delete("all")

    # 修正数组维度：(高度, 宽度, 通道数)，符合Numpy图像规范
    img = np.ones((height, width, 3), dtype=np.double) * 0.75

    # 随机生成矩形位置
    x_generated = np.random.uniform(0, width, 5)
    y_generated = np.random.uniform(0, height, 5)
    
    for x, y in zip(x_generated, y_generated):
        base_height = 70
        base_width = 70

        # 计算矩形四个顶点坐标
        x0 = x - base_width/2
        x1 = x + base_width/2
        y0 = y - base_height/2
        y1 = y + base_height/2

        poly = np.array((
            (x0, y0),
            (x1, y0),
            (x1, y1),
            (x0, y1),
        ))

        # skimage.polygon参数为(行坐标, 列坐标)，对应(y, x)，需调换输入的x/y顺序
        rr, cc = polygon(poly[:, 1], poly[:, 0], img.shape)
        img[rr, cc, :] = 0.5
    
    # 将浮点数组转换为uint8整数数组，符合PIL的RGB格式要求
    scaled_to_8bit = (img * 255).astype(np.uint8)
    imgarray = ImageTk.PhotoImage(image=Image.fromarray(scaled_to_8bit, 'RGB'))

    # 在画布上显示图像
    canvas.create_image(20, 20, anchor="nw", image=imgarray)
    
    # 调试用：显示Matplotlib验证图像
    plt.imshow(img)
    plt.show()

if __name__ == "__main__":
    width = 1000
    height = 1000

    # 创建主窗口
    root = tk.Tk()
    root.configure(background="green")

    # 创建画布
    canvas = tk.Canvas(root, width=width, height=height)
    canvas.pack()

    # 创建生成按钮
    button = tk.Button(root, text="Generate", command=generate)
    button.pack()

    # 启动Tkinter主循环
    root.mainloop()

关键修改说明 #

1. 维度修正：将图像数组的shape从(width, height, 3)改为(height, width, 3)，匹配Numpy对图像行（高度）、列（宽度）的定义。
2. 坐标顺序调整：skimage.draw.polygon的参数顺序是行坐标（y轴）在前，列坐标（x轴）在后，因此将多边形顶点的x、y坐标调换后传入。
3. 数据类型转换：通过astype(np.uint8)将浮点数组转为0-255的整数数组，满足PIL对RGB图像的格式要求。
4. 引用保留：声明global imgarray将图像对象转为全局变量，避免被Python垃圾回收机制清理，保证画布上的图像持续显示。

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