How to Dynamically Resize Background Images – Tkinter
Last Updated :
09 Dec, 2022
You might surely be worried about how to resize your background image with the change in screen size. In this article, We are creating an advanced-level GUI application using the Tkinter module using Python in which you need to resize the app window various times and dynamically resize background images.
Modules Required:
Tkinter: As the GUI application is created in Python, then you surely need the Tkinter module. It is one of the easiest and fastest ways of creating GUI applications. You can download the module Tkinter using the following command:
pip install tkinter
Pillow: The module which uses histograms to extract some statistical data out of images is known as the Pillow module. The pillow module can be installed using the following command:
pip install pillow
Stepwise Implementation:
Step 1: First of all, import the library Tkinter, PIL.Image and PIL.ImageTk.
Python3
from tkinter import *
import PIL.Image as im
import PIL.ImageTk as imtk
|
Step 2: Now, create a GUI app using Tkinter, set the dimensions, and give a title to the app.
Python3
gui_app = Tk()
gui_app.title(“
gui_app.geometry( "#Dimensions of the app" )
|
Step 3: Then, define the image using the PhotoImage function. As the image cannot be directly passed to the argument, thus PhotoImage() function is used which returns the image object.
Python3
background_image = imtk.PhotoImage( file =
"# Path of the image" )
|
Step 5: Further, create and display the canvas in the GUI app. display the image imported in step 3 in the canvas.
Python3
canvas_widget = Canvas(gui_app, width = 800 , height = 500 )
canvas_widget.pack(fill = "both" , expand = True )
canvas_widget.create_image( 0 , 0 ,
image = background_image,
anchor = "nw" )
|
Step 7: Now, create a function to resize all the images in the program using resize() function. Here, we have used the Image.ANTIALIAS, which will maintain the quality of the image when it is made compact or huge.
Python3
def resize_image(e, updated_background_image):
resized_background_image = updated_background_image.resize(
(e.width, e.height), im.ANTIALIAS)
return resized_background_image
|
Step 8: In this step, we will create a function to display any other widget we want on the app. Here we have written text on the app.
Python3
def resize_image(e, updated_background_image):
resized_background_image = updated_background_image.resize(
(e.width, e.height), im.ANTIALIAS)
return resized_background_image
|
Step 9: Moreover, create a function resizer with the argument e that will resize the background image size according to the app screen size.
def background_image(e):
- Step 9.1: In the function created, define some global variables.
global updated_background_image, resized_background_image, new_background_image
- Step 9.2: Then, open and identify the image using Image.open() function with the argument as the path of the image.
updated_background_image=im.open("#Path of image")
- Step 9.3: In this step, we will call the resize_image function to resize the image by maintaining the quality of the image.
resized_background_image=resize_image(e,updated_background_image)
- Step 9.4: Further, define the new image created in the previous step using the PhotoImage() function.
new_background_image=imtk.PhotoImage(resized_background_image)
- Step 9.5: Now, we will display the newly created image in the previous step on the canvas.
canvas_widget.create_image(0,0,image=new_background_image,anchor="nw")
- Step 9.6: Later on, we call a function display_widgets to display any widgets on the background image.
display_widgets()
Step 10: Here, we have bound the function created in step 7 with the <Configure>, which will resize the size of a background image with the size of the app.
gui_app.bind('<Configure>',background_image)
Step 11: Finally, make the loop for displaying the GUI app on the screen.
gui_app.mainloop()
Dynamically Resize Image
In this example, we have used the image (link) that we have inserted as a background image. Now, whenever we resize the GUI app, the background image also gets resized according to it. For resizing the background image with the GUI app, we have created the class Resize, in which we have defined the constructor for getting the image and binding to function for resizing the image. Also, we have defined a function that resizes the image and displays the new image on the app.
Python3
from tkinter import *
from PIL import Image, ImageTk
app = Tk()
app.title( "Resize Background Images" )
app.geometry( "500x500" )
class Resize(Frame):
def __init__( self , master):
Frame.__init__( self , master)
self .image = Image. open ( "img_2.png" )
self .img_copy = self .image.copy()
self .background_image = ImageTk.
PhotoImage( self .image)
self .background = Label( self , image = self .
background_image)
self .background.pack(fill = BOTH,
expand = YES)
self .background.bind( '<Configure>' ,
self .resize_background)
def resize_background( self , event):
new_width = event.width
new_height = event.height
self .image = self .img_copy.resize
((new_width, new_height))
self .background_image = ImageTk.
PhotoImage( self .image)
self .background.configure(image = self .
background_image)
e = Resize(app)
e.pack(fill = BOTH, expand = YES)
app.mainloop()
|
Output:
Dynamically Resize with one Fixed Image
In this example, we have used the image (link) that we have inserted as a background image. Now, whenever we resize the GUI app, the background image also gets resized according to it. For resizing the background image with the GUI app, we have created the image_background function with argument e, resize_image function, and display_widgets function respectively. The resize_image and display_widgets functions will be called by the image_background function bound. Further, we have bound the image_background function with <Configure>.
Python3
from tkinter import *
import PIL.Image as im
import PIL.ImageTk as imtk
gui_app = Tk()
gui_app.title( "Resize Image Dynamically" )
gui_app.geometry( "500x500" )
background_image = imtk.PhotoImage( file = "gfg.png" )
canvas_widget = Canvas(gui_app, width = 800 , height = 500 )
canvas_widget.pack(fill = "both" , expand = True )
canvas_widget.create_image( 0 , 0 , image = background_image, anchor = "nw" )
def resize_image(e, updated_background_image):
resized_background_image = updated_background_image.resize(
(e.width, e.height), im.ANTIALIAS)
return resized_background_image
def display_widgets():
canvas_widget.create_text( 300 , 30 , text = "Welcome to Geeks For Geeks" , font = (
'Helvetica' , '30' , 'bold' ), fill = 'white' )
def image_background(e):
global updated_background_image, resized_background_image, new_background_image
updated_background_image = im. open ( "gfg.png" )
resized_background_image = resize_image(e, updated_background_image)
new_background_image = imtk.PhotoImage(resized_background_image)
canvas_widget.create_image( 0 , 0 , image = new_background_image, anchor = "nw" )
display_widgets()
gui_app.bind( '<Configure>' , image_background)
gui_app.mainloop()
|
Output:
Share your thoughts in the comments
Please Login to comment...