如何在Tkinter画布完整显示图片并保留像素RGB值查询功能？

问题根源 #

代码仅显示图片左上象限，通常是因为图片尺寸超出Canvas/窗口设定大小且未做适配，或是鼠标坐标与原始图片像素的映射逻辑错误。以下提供两种可行解决方案，同时保留RGB值查询功能。

方案1：缩放图片适配窗口显示 #

适合图片过大时，自动缩放到窗口可容纳的尺寸，完整显示图片并正确查询RGB值。

修改后的完整代码 #

import tkinter as tk
from PIL import Image, ImageTk

class ImageRGBViewer:
    def __init__(self, root, image_path):
        self.root = root
        self.root.title("图片RGB查看器")

        # 加载原始图片并转为RGB模式
        self.original_img = Image.open(image_path).convert("RGB")
        self.original_w, self.original_h = self.original_img.size

        # 设置窗口最大显示尺寸（可自行调整）
        max_display_w, max_display_h = 800, 600
        # 计算等比缩放比例
        scale = min(max_display_w / self.original_w, max_display_h / self.original_h)
        self.display_w = int(self.original_w * scale)
        self.display_h = int(self.original_h * scale)

        # 缩放图片用于显示
        self.display_img = self.original_img.resize((self.display_w, self.display_h), Image.Resampling.LANCZOS)
        self.tk_img = ImageTk.PhotoImage(self.display_img)

        # 创建与显示图片尺寸匹配的Canvas
        self.canvas = tk.Canvas(root, width=self.display_w, height=self.display_h)
        self.canvas.pack()
        self.canvas.create_image(0, 0, anchor=tk.NW, image=self.tk_img)

        # RGB值显示标签
        self.rgb_label = tk.Label(root, text="RGB: (0, 0, 0)")
        self.rgb_label.pack(pady=5)

        # 绑定鼠标移动事件
        self.canvas.bind("<Motion>", self.show_rgb)

    def show_rgb(self, event):
        x, y = event.x, event.y
        # 检查鼠标是否在图片范围内
        if 0 <= x < self.display_w and 0 <= y < self.display_h:
            # 将显示坐标转换为原始图片坐标
            original_x = int(x / (self.display_w / self.original_w))
            original_y = int(y / (self.display_h / self.original_h))
            # 获取原始像素的RGB值
            r, g, b = self.original_img.getpixel((original_x, original_y))
            self.rgb_label.config(text=f"RGB: ({r}, {g}, {b})")
        else:
            self.rgb_label.config(text="RGB: (0, 0, 0)")

if __name__ == "__main__":
    root = tk.Tk()
    # 替换为你的图片路径
    viewer = ImageRGBViewer(root, "your_image.jpg")
    root.mainloop()

关键说明 #

• 等比缩放：通过计算最小缩放比例，保证图片不变形，同时完整显示在窗口内。
• 坐标映射：鼠标在Canvas上的坐标是缩放后的位置，需转换回原始图片坐标，才能获取正确的RGB值。
• Canvas尺寸匹配：Canvas的宽高与缩放后的图片尺寸一致，确保图片完整显示。

方案2：保留原图尺寸，添加滚动条查看 #

适合需要查看原图细节的场景，通过滚动条浏览完整图片，同时正确查询RGB值。

修改后的完整代码 #

import tkinter as tk
from PIL import Image, ImageTk

class ImageRGBViewer:
    def __init__(self, root, image_path):
        self.root = root
        self.root.title("图片RGB查看器（带滚动条）")

        # 加载原始图片并转为RGB模式
        self.original_img = Image.open(image_path).convert("RGB")
        self.img_w, self.img_h = self.original_img.size

        # 转换为Tkinter支持的图片格式
        self.tk_img = ImageTk.PhotoImage(self.original_img)

        # 创建滚动条容器框架
        frame = tk.Frame(root)
        frame.pack(fill=tk.BOTH, expand=True)

        # 创建Canvas，设置滚动范围为图片实际尺寸
        self.canvas = tk.Canvas(frame, width=800, height=600, scrollregion=(0, 0, self.img_w, self.img_h))
        self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

        # 添加垂直、水平滚动条
        v_scroll = tk.Scrollbar(frame, orient=tk.VERTICAL, command=self.canvas.yview)
        v_scroll.pack(side=tk.RIGHT, fill=tk.Y)
        h_scroll = tk.Scrollbar(root, orient=tk.HORIZONTAL, command=self.canvas.xview)
        h_scroll.pack(side=tk.BOTTOM, fill=tk.X)

        # 绑定滚动条与Canvas的联动
        self.canvas.configure(yscrollcommand=v_scroll.set, xscrollcommand=h_scroll.set)

        # 在Canvas上绘制原图
        self.canvas.create_image(0, 0, anchor=tk.NW, image=self.tk_img)

        # RGB值显示标签
        self.rgb_label = tk.Label(root, text="RGB: (0, 0, 0)")
        self.rgb_label.pack(pady=5)

        # 绑定鼠标移动事件
        self.canvas.bind("<Motion>", self.show_rgb)

    def show_rgb(self, event):
        # 获取鼠标相对于图片的绝对坐标（抵消滚动偏移）
        x = self.canvas.canvasx(event.x)
        y = self.canvas.canvasy(event.y)
        # 检查坐标是否在图片范围内
        if 0 <= x < self.img_w and 0 <= y < self.img_h:
            r, g, b = self.original_img.getpixel((int(x), int(y)))
            self.rgb_label.config(text=f"RGB: ({r}, {g}, {b})")
        else:
            self.rgb_label.config(text="RGB: (0, 0, 0)")

if __name__ == "__main__":
    root = tk.Tk()
    # 替换为你的图片路径
    viewer = ImageRGBViewer(root, "your_image.jpg")
    root.mainloop()

关键说明 #

• 滚动区域设置：通过scrollregion参数指定Canvas的可滚动范围为图片实际尺寸。
• 绝对坐标获取：使用canvasx和canvasy方法，将鼠标相对于Canvas的坐标转换为相对于图片的绝对坐标，抵消滚动偏移，确保RGB值查询准确。

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