Canvas 背景图片不适合整个 window tkinter python

Question

I'm new with tkinter GUI and trying to make a background to a top-level window by using canvas. I have tried to make the canvas the same size as the entire window by expand=TRUE. However, it doesn't work well and the image is not sized as the window. can anyone help me fix that problem? The top-level window is overviewWindow, which is in the function createOverviewWindow. This is my code: There is no output image because unfortunately I cant add images. The window I got has the background image in the top left corner but small sized

    from tkinter import *
from tkinter import ttk, font, messagebox
from PIL import ImageTk, Image
import os


root = Tk()
root.title("Decoder of ultrasound images to detect colon tumors")
# Adding window icon
root.iconbitmap('afekaImage.ico')

rootWidth, rootHeight = 600, 600

screenWidth = root.winfo_screenwidth()
screenHeight = root.winfo_screenheight()

topLeftPosition = (screenWidth / 2 - rootWidth / 2, screenHeight / 2 - rootHeight / 2)

# Configure window size
root.geometry(f'{rootWidth}x{rootHeight}+{int(topLeftPosition[0])}+{int(topLeftPosition[1])}')


# open doc file
def openDocFile():
    os.startfile("FinalProject.docx")


# adjusting background image to fit window
def adjustBackgroundImage(event):
    label = event.widget
    # avoid garbage collection option 1
    # global resizedBackgroundImage, newBackgroundImage
    # ----------
    width = event.width
    height = event.height
    resizedBackgroundImage = copyImage.resize((width, height))
    newBackgroundImage = ImageTk.PhotoImage(resizedBackgroundImage)
    label.config(image=newBackgroundImage)
    # avoid garbage collection option 2
    label.image = newBackgroundImage
    # ----------


def createUserManualWindow(button_userManual):
    # global image1
    userManualWindow = Toplevel(root)
    userManualWindow.geometry(f'{rootWidth}x{rootHeight}+{int(topLeftPosition[0])}+{int(topLeftPosition[1])}')
    userManualWindow.iconbitmap('afekaImage.ico')
    image1 = ImageTk.PhotoImage(Image.open('background.jpg'))
    label1 = ttk.Label(userManualWindow, image=image1)
    label1.pack()
    label1.bind('<Configure>', adjustBackgroundImage)
    label1.pack(fill=BOTH, expand=YES)

    def activateButtonUserManual():
        button_userManual.configure(state="normal")
        userManualWindow.destroy()

    button_userManual.configure(state="disabled")
    button_exit_userManualWindow = Button(userManualWindow, text="Exit", font=fontStyle,
                                          command=lambda: [userManualWindow.destroy(), activateButtonUserManual()])
    button_exit_userManualWindow.place(relx=0.4, rely=0.8, relwidth=0.2, relheight=0.1)
    # will occurs only when esc pressed
    userManualWindow.protocol("WM_DELETE_WINDOW", activateButtonUserManual)
    # ----------


def createOverviewWindow(button_overview):
    global image1, canvas
    overviewWindow = Toplevel(root)
    overviewWindow.geometry(f'{rootWidth}x{rootHeight}+{int(topLeftPosition[0])}+{int(topLeftPosition[1])}')
    overviewWindow.iconbitmap('afekaImage.ico')
    canvas = Canvas(overviewWindow, width=600, height=600)
    canvas.pack(fill=BOTH, expand=TRUE)
    image1 = ImageTk.PhotoImage(Image.open('background.jpg'))
    canvas.create_image(0, 0, image=image1, anchor='nw')


image = Image.open('background.jpg')
copyImage = image.copy()
backgroundImage = ImageTk.PhotoImage(image)
label = ttk.Label(root, image=backgroundImage)
label.bind('<Configure>', adjustBackgroundImage)
label.pack(fill=BOTH, expand=YES)

fontStyle = font.Font(family="Segoe Script", size=10, weight=font.BOLD)

# Create buttons
button_userManual = Button(root, text="USER MANUAL", command=lambda: createUserManualWindow(button_userManual), font=fontStyle)
button_userManual.place(relx=0.4, rely=0.2, relwidth=0.2, relheight=0.1)

button_overview = Button(root, text="OVERVIEW", command=lambda: createOverviewWindow(button_overview), font=fontStyle)
button_overview.place(relx=0.4, rely=0.4, relwidth=0.2, relheight=0.1)

button_openDocFile = Button(root, text="DOC FILE", font=fontStyle, command=openDocFile)
button_openDocFile.place(relx=0.4, rely=0.6, relwidth=0.2, relheight=0.1)

button_quit = Button(root, text="Exit", font=fontStyle, command=root.destroy)
button_quit.place(relx=0.4, rely=0.8, relwidth=0.2, relheight=0.1)

root.mainloop()

Answer 1

The image you put was too big for the canvas. It's like putting a 8K image into a 720p monitor. It simply does not fit. So the solutions are

a) resize the image so it fits in the canvas (I see you have the PIL module so it should be quick)

b) Change the canvas size so it fits the image