Tkinter, PIL, Image not loading with crop

Question

My code is supposed to load an image on a topLevel window which contains a canvas, then from that loaded image, I should select via a couple of coordinates a rectangle in that image. The selection should appear in the main gui's canvas.

I've visited a couple of topics which could have the same problem as me, such as this one.

1. I tried implementing the offered solution by making imgLoaded and imgCropLoadedinto global variables (See code bellow), but it doesn't solve my problem,
2. Notice in my code that the variable idCrop = cropCanvas.create_image(0,0,anchor='nw',image=imgCropLoaded) takes the value 1 during debugging, so really the only problem is the image not displaying,
3. If you wish to test my code: run it, then load a JPEG/.jpg image. Once it is loaded, you can try clicking on it (on the second window) and dragging a rectangle to make the selection, the coordinates of the top left and bottom right points will be displayed in the console.

Here's my code (I'm still a novice in python and tkInter)

from _functools import partial
from tkinter import Tk, Menu, Canvas, Frame, Toplevel
from tkinter.filedialog import askopenfilename

from PIL import ImageTk, Image


#Variables globales
xSelectHG=0
ySelectHG=0

xSelectBD=0
ySelectBD=0

#last Rectangle Id
idRectangle = 0

#Image files references from PhotoImage
imgLoaded = 0
imgCropLoaded = 0

# Functions
def deleteRectangle(canvas,id):
    canvas.delete(id)
    return

def startSelectPortion(event):
    global xSelectHG
    xSelectHG = event.x

    global ySelectHG    
    ySelectHG = event.y
    #print("[X,Y]Hg=",xSelectHG, ySelectHG)
    return
def stopSelectPortion(imgFile,cropCanvas,canvas,event):

    #Delete previous rectangle
    global idRectangle
    deleteRectangle(canvas, idRectangle)


    global xSelectBD
    xSelectBD = event.x

    global ySelectBD    
    ySelectBD = event.y
    #print("[X,Y]BD=",xSelectBD, ySelectBD)
    #print("[X,Y]BD=",xSelectBD, ySelectBD)

    startCrop(imgFile,cropCanvas,canvas)
    return

def startCrop(imgFile, cropCanvas, canvas):
    #Cropping an image
    #Crop box:
    #global xSelectHG, ySelectHG, xSelectBD, ySelectBD
    print("[X,Y]Hg=",xSelectHG, ySelectHG)
    print("[X,Y]BD=",xSelectBD, ySelectBD)
    cropBox = (xSelectHG,ySelectHG,xSelectBD,ySelectBD)
    imgCrop = imgFile.crop(cropBox)
    global imgCropLoaded
    imgCropLoaded = ImageTk.PhotoImage(imgCrop)
    #Keeping a reference of the loaded image
    cropCanvas.image = imgCropLoaded
    cropCanvas.config(height=imgCrop.size[0],width=imgCrop.size[1])

    #This idCrop seems to be 1 during debuggin, so the image loads successfully, but it doesn't get displayed.
    idCrop = cropCanvas.create_image(0,0,anchor='nw',image=imgCropLoaded)
    global idRectangle
    idRectangle=canvas.create_rectangle(xSelectHG,ySelectHG,xSelectBD,ySelectBD)
    canvas.update()
    cropCanvas.update()
    return

def openImage(topLevel,canvas, cropCanvas):
    imgFormats = [("JPEG","*.jpg")]
    imgName = askopenfilename(filetypes=imgFormats,title="Please choose an image of JPEG format")
    imgFile = Image.open(imgName)
    global imgLoaded
    imgLoaded = ImageTk.PhotoImage(imgFile)
    canvas.config(height=imgFile.size[0], width=imgFile.size[1])
    #Keeping a reference of the loaded image
    canvas.img = imgLoaded
    canvas.create_image(0,0,anchor='nw',image=imgLoaded)
    canvas.grid(row=0,columns=1)
    canvas.bind('<Button-1>',partial(startSelectPortion))
    canvas.bind('<ButtonRelease-1>',partial(stopSelectPortion, imgFile, cropCanvas, canvas))

    return

def quit():
    gui.destroy()
    return
gui = Tk()

#How to make this top level appear only when I click the button?
imgTopLevel = Toplevel(gui)

imgCanvas = Canvas(imgTopLevel, height=100, width=100)
crpImgCanvas = Canvas(gui,height=100,width=100)

menubar = Menu(gui)
filemenu = Menu(menubar, tearoff=0)
menubar.add_cascade(label="Files", menu=filemenu)
filemenu.add_command(label="Open", command=partial(openImage, imgTopLevel,imgCanvas,crpImgCanvas))
menubar.add_separator()
menubar.add_command(label="Quit", command=partial(quit))

gui.config(menu=menubar)
gui.mainloop()

Answer 1

Tested your code out and it works as you intended it. You only forgot to place your canvas widget in your main window. Adding a crpImgCanvas.grid() or crImgCanvas.pack() worked for me. Goodluck!