How do I make a clickable image that gives me the coordinates of the click?

Question

I am trying to make a slideshow-like program using the tkinter module. Here is what I have done:

from tkinter import *

root = Tk()


photo = PhotoImage(file = "image.jpeg")
w = Label(root, image=photo)
w.pack()

def callback(event):
    print ("clicked at", event.x, event.y)

##canvas= Canvas(root, width=800, height=500)
canvas= Canvas(root)
canvas.bind("<Button-1>", callback)
canvas.pack()

root.mainloop()

what's going on:
I am putting a picture on the canvas.
I am also detecting left clicks and getting the coordinates (which are printed on the shell)

But what really happens:

The picture (which needs to be in the same folder as the script, btw) appears on top, and a little blank space appears underneath, and I can click that (and get coordinates for the click). If I click the picture, nothing happens. When I click the blank space, it only gives the coordinates of the click for the blank space, not counting the picture as part of the area. If I enlarge the window, it just adds inert blank space on the sides, that do not react to being clicked.

My question is, how do I get the picture to be the clickable part (meaning, gets coordinates as well), and remove the blank space

If you can get the picture to enlarge with the window, that's even better.

Python 3.7.3, on MacBook. I only have the standard library.

Answer 1

You don't need the canvas and should bind on the label instead. Note that tkinter.PhotoImage() does not support JPEG image, use PNG or use Pillow module instead.

from tkinter import *
from PIL import ImageTk

root = Tk()

photo = ImageTk.PhotoImage(file="image.jpeg")
w = Label(root, image=photo)
w.pack()

def callback(event):
    print ("clicked at", event.x, event.y)

w.bind("<Button-1>", callback)

root.mainloop()

Answer 2

You are not actually placing the image on the canvas. To place the image on the canvas use .create_image(). To resize the image to the canvas. you can use resize method provided by the PIL library.

from tkinter import *
from PIL import ImageTk, Image

def resize_event(event):
    resized = ImageTk.PhotoImage(img.resize((event.width, event.height), resample = Image.NEAREST))
    canvas.itemconfig(img_item, image=resized)
    canvas.moveto(img_item, 0, 0)
    canvas.image = resized
    
def callback(event):
    print ("clicked at", event.x, event.y)
     

root = Tk()

img = Image.open(r"Imagepath")
photo = ImageTk.PhotoImage(img)
#w = Label(root, image=photo)
#w.pack()

##canvas= Canvas(root, width=800, height=500)
canvas= Canvas(root)
img_item = canvas.create_image(0, 0, image = photo)
canvas.bind("<Button-1>", callback)
canvas.bind('<Configure>', resize_event)
canvas.pack(expand=True, fill='both')

root.mainloop()