Displaying an image in python via Button and Canvas

Question

I am a begginer in python, tkinter. I have written a code that should normally display an image in a canvas.

What happens is that the main frame (gui) is displayed with the menu bar, then when I click on load image, the gui window shrinks (to 100x100 I guess) but nothing is displayed within.

Could you please explain to me why this is happening so I can understand where the error occurs, and how to correct it?

# -*- coding:utf-8 -*-
# Imports
from tkinter import Tk, Menu, Canvas
from PIL import Image, ImageTk

# Function definitions
def deleteImage(canvas):
    canvas.delete("all")
    return

def loadImage(canvas, img):
    filename = ImageTk.PhotoImage(img)
    canvas.image = filename
    canvas.create_image(0,0,anchor='nw',image=filename)
    return

def quitProgram():
    gui.destroy()
# Main window
gui = Tk()

# Inside the main gui window
#Creating an object containing an image
# A canvas with borders that adapt to the image within it
img = Image.open("fleur.jpg")
canvas = Canvas(gui,height=img.size[0],width=img.size[0])
canvas.pack()

# Menu bar
menubar = Menu(gui)
# Adding a cascade to the menu bar:
filemenu = Menu(menubar, tearoff=0)
menubar.add_cascade(label="Files", menu=filemenu)
# Adding a load image button to the cascade menu "File"
filemenu.add_command(label="Load an image", command=loadImage)
# Adding a delete image button to the cascade menu "File"
filemenu.add_command(label="Delete image", command=deleteImage)
filemenu.add_separator()
filemenu.add_command(label="Quit", command=quitProgram)
menubar.add_separator()
menubar.add_cascade(label="?")

# Display the menu bar
gui.config(menu=menubar)
gui.mainloop()

EDIT: The second problem is that I want to create a canvas and the image in the main gui window, and pass them as arguments to the menu buttons (See code above, where img and canvas are created separately from the function loadImage). Seeing as putting parenthesis in the command=loadImage() created a problem on its own.

Another point that rises a question in my head : Regarding the first problem which was solved by keeping a reference to the filename=ImageTk.PhotoImage(img). Wouldn't it normally be pointless to keep a reference inside the function since it's a local variable anyway?

For adding a parameter to your command, check here please. http://stackoverflow.com/questions/6920302/how-to-pass-arguments-to-a-button-command-in-tkinter — Lafexlos, Apr 28 '16 at 14:03
Yeah, although not by the first solution. I had to use the partial from functools library it worked like this : `filemenu.add_command(label="Load an image", command=partial(loadImage,canvas,img))` — Imad, Apr 28 '16 at 16:05

score 4 · Accepted Answer · answered Apr 28 '16 at 13:06

As stated in effbot's PhotoImage page, you have to keep a reference of your image to ensure it's not garbage collected.

You must keep a reference to the image object in your Python program, either by storing it in a global variable, or by attaching it to another object.

Note: When a PhotoImage object is garbage-collected by Python (e.g. when you return from a function which stored an image in a local variable), the image is cleared even if it’s being displayed by a Tkinter widget.

To avoid this, the program must keep an extra reference to the image object. A simple way to do this is to assign the image to a widget attribute, like this:

Your loadImage() method should look like below.

def loadImage():
    img = Image.open("fleur.jpg")
    filename = ImageTk.PhotoImage(img)
    canvas = Canvas(gui,height=100,width=100)
    canvas.image = filename  # <--- keep reference of your image
    canvas.create_image(0,0,anchor='nw',image=filename)
    canvas.pack()

Thank you for your answer, it is informative, but unfortunately it does not produce the result I want. Now the image is loaded from the start, what I want, is to load an image when I click the button "Load image". — Imad, Apr 28 '16 at 13:34
@Aetos Can you please check if you have paranthesis next to your `loadImage` in your `filemenu.add_command(..., command=loadImage)` line? Normally, that line should look like this. not `filemenu.add_command(..., command=loadImage())`. — Lafexlos, Apr 28 '16 at 13:37
Spot on :) now I'm going to Edit the thread to incorporate a few additions. — Imad, Apr 28 '16 at 13:39

Displaying an image in python via Button and Canvas

1 Answers1