How To Create an Image Zooming and Pan App in Python Using Tkinter
In this Python Tutorial we will see How to Create an image viewer with zoom, pan, and drag functionality Using Python and Tkinter library.
What We're Building?
Our image viewer will include:
- Image loading with file dialog.
- Zoom in/out functionality.
- Pan and drag.
- Fit-to-window.
- Keyboard shortcuts.
- Status bar with image information.
What We Are Gonna Use In This Project:
- Python Programming Language.- Tkinter (GUI).
- VS Editor.
- VS Editor.
Project Source Code:
import tkinter as tk
from tkinter import filedialog, messagebox
from PIL import Image, ImageTk
import os
class ImageZoomApp:
def __init__(self, root):
"""Initialize the image viewer application"""
# Set up the main window
self.root = root
self.root.title("Simple Image Zoom App")
self.root.geometry("1000x700") # Width x Height
self.root.configure(bg='#2c3e50') # Dark blue background
# Variables to store image data
self.original_image = None # The original image file
self.display_image = None # The image we show on screen
self.zoom_level = 1.0 # How zoomed in we are (1.0 = normal size)
# Variables for dragging the image around
self.drag_start_x = 0
self.drag_start_y = 0
self.image_x = 0 # Where the image is positioned
self.image_y = 0
# Create all the parts of our interface
self.create_buttons()
self.create_canvas()
self.create_status_bar()
self.setup_keyboard_shortcuts()
def create_buttons(self):
"""Create the button toolbar at the top"""
# Frame to hold all our buttons
button_frame = tk.Frame(self.root, bg='#34495e', height=60)
button_frame.pack(fill=tk.X, padx=10, pady=10)
button_frame.pack_propagate(False) # Keep the frame height fixed
# Open Image button
open_btn = tk.Button(
button_frame,
text="Open Image",
command=self.open_image,
bg='#3498db', # Blue background
fg='white', # White text
font=('Arial', 12, 'bold'),
padx=20,
pady=8,
cursor='hand2' # Hand cursor when hovering
)
open_btn.pack(side=tk.LEFT, padx=5, pady=10)
# Zoom In button
zoom_in_btn = tk.Button(
button_frame,
text="Zoom In (+)",
command=self.zoom_in,
bg='#27ae60', # Green background
fg='white',
font=('Arial', 10),
padx=15,
pady=8,
cursor='hand2'
)
zoom_in_btn.pack(side=tk.LEFT, padx=5, pady=10)
# Zoom Out button
zoom_out_btn = tk.Button(
button_frame,
text="Zoom Out (-)",
command=self.zoom_out,
bg='#e74c3c', # Red background
fg='white',
font=('Arial', 10),
padx=15,
pady=8,
cursor='hand2'
)
zoom_out_btn.pack(side=tk.LEFT, padx=5, pady=10)
# Reset Size button
reset_btn = tk.Button(
button_frame,
text="Reset Size",
command=self.reset_size,
bg='#9b59b6', # Purple background
fg='white',
font=('Arial', 10),
padx=15,
pady=8,
cursor='hand2'
)
reset_btn.pack(side=tk.LEFT, padx=5, pady=10)
# Fit to Window button
fit_btn = tk.Button(
button_frame,
text="Fit to Window",
command=self.fit_to_window,
bg='#f39c12', # Orange background
fg='white',
font=('Arial', 10),
padx=15,
pady=8,
cursor='hand2'
)
fit_btn.pack(side=tk.LEFT, padx=5, pady=10)
# Zoom level display
self.zoom_label = tk.Label(
button_frame,
text="100%",
bg='#34495e',
fg='#ecf0f1',
font=('Arial', 12, 'bold'),
padx=20
)
self.zoom_label.pack(side=tk.RIGHT, pady=10)
def create_canvas(self):
"""Create the canvas where we display the image"""
# Frame to hold the canvas and scrollbars
canvas_frame = tk.Frame(self.root, bg='#2c3e50')
canvas_frame.pack(fill=tk.BOTH, expand=True, padx=10, pady=(0, 10))
# Create the canvas
self.canvas = tk.Canvas(
canvas_frame,
bg='#1a252f', # Dark background for the image area
highlightthickness=0, # No border
cursor='crosshair' # Crosshair cursor
)
# Create scrollbars for when image is larger than window
v_scrollbar = tk.Scrollbar(canvas_frame, orient=tk.VERTICAL,
command=self.canvas.yview)
h_scrollbar = tk.Scrollbar(canvas_frame, orient=tk.HORIZONTAL,
command=self.canvas.xview)
# Connect scrollbars to canvas
self.canvas.configure(yscrollcommand=v_scrollbar.set,
xscrollcommand=h_scrollbar.set)
# Position everything in the frame
v_scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
h_scrollbar.pack(side=tk.BOTTOM, fill=tk.X)
self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
# Set up mouse interactions
self.setup_mouse_events()
def create_status_bar(self):
"""Create the status bar at the bottom"""
status_frame = tk.Frame(self.root, bg='#34495e', height=40)
status_frame.pack(fill=tk.X, padx=10, pady=(0, 10))
status_frame.pack_propagate(False)
# Status text (left side)
self.status_text = tk.Label(
status_frame,
text="Ready - Click 'Open Image' to start",
bg='#34495e',
fg='#bdc3c7',
font=('Arial', 10),
anchor=tk.W # Align text to the left
)
self.status_text.pack(side=tk.LEFT, fill=tk.X, expand=True, padx=10, pady=10)
# Image info (right side)
self.image_info = tk.Label(
status_frame,
text="",
bg='#34495e',
fg='#3498db',
font=('Arial', 10, 'bold')
)
self.image_info.pack(side=tk.RIGHT, padx=10, pady=10)
def setup_mouse_events(self):
# Mouse dragging for moving the image around
self.canvas.bind("<Button-1>", self.start_drag) # Left click
self.canvas.bind("<B1-Motion>", self.drag_image) # Drag while holding left click
self.canvas.bind("<ButtonRelease-1>", self.end_drag) # Release left click
# Double-click to fit image to window
self.canvas.bind("<Double-Button-1>", lambda e: self.fit_to_window())
def setup_keyboard_shortcuts(self):
"""Set up keyboard shortcuts"""
# Ctrl+O to open image
self.root.bind("<Control-o>", lambda e: self.open_image())
# Plus key to zoom in
self.root.bind("<Control-plus>", lambda e: self.zoom_in())
# Minus key to zoom out
self.root.bind("<Control-minus>", lambda e: self.zoom_out())
# Ctrl+0 to reset size
self.root.bind("<Control-0>", lambda e: self.reset_size())
def open_image(self):
"""Open a file dialog to select an image"""
# Define what types of files we can open
file_types = [
("All Images", "*.png *.jpg *.jpeg *.gif *.bmp"),
("PNG files", "*.png"),
("JPEG files", "*.jpg *.jpeg"),
("GIF files", "*.gif"),
("BMP files", "*.bmp"),
("All files", "*.*")
]
# Show the file selection dialog
filename = filedialog.askopenfilename(
title="Choose an image file",
filetypes=file_types
)
# If user selected a file, try to load it
if filename:
try:
self.load_image(filename)
except Exception as e:
# Show error message if something goes wrong
messagebox.showerror("Error", f"Could not open image:\n{str(e)}")
def load_image(self, filename):
"""Load an image file and display it"""
try:
# Open the image file
self.original_image = Image.open(filename)
# Reset zoom to normal size
self.zoom_level = 1.0
# Center the image in the window
self.center_image()
# Update the display
self.update_display()
# Update status information
self.update_status(filename)
except Exception as e:
raise Exception(f"Failed to load image: {str(e)}")
def center_image(self):
"""Center the image in the canvas"""
# Wait a moment for the window to update its size
self.root.update_idletasks()
# Get the canvas size
canvas_width = self.canvas.winfo_width()
canvas_height = self.canvas.winfo_height()
# Put the image in the center
if canvas_width > 1 and canvas_height > 1:
self.image_x = canvas_width // 2
self.image_y = canvas_height // 2
def update_display(self):
"""Update what we see on the screen"""
if not self.original_image:
return # Nothing to show if no image is loaded
try:
# Calculate the new size based on zoom level
new_width = int(self.original_image.width * self.zoom_level)
new_height = int(self.original_image.height * self.zoom_level)
# Make sure size is at least 1 pixel
new_width = max(1, new_width)
new_height = max(1, new_height)
# Resize the image for display
if self.zoom_level == 1.0:
# Use original image if no zoom
display_image = self.original_image
else:
# Resize the image
display_image = self.original_image.resize((new_width, new_height),
Image.LANCZOS)
# Convert to format Tkinter can display
self.display_image = ImageTk.PhotoImage(display_image)
# Clear the canvas and show the new image
self.canvas.delete("all")
self.canvas.create_image(
self.image_x, self.image_y,
anchor=tk.CENTER,
image=self.display_image
)
# Update the scroll area
self.canvas.configure(scrollregion=self.canvas.bbox("all"))
# Update the zoom percentage display
zoom_percent = int(self.zoom_level * 100)
self.zoom_label.config(text=f"{zoom_percent}%")
except Exception as e:
self.status_text.config(text=f"Error displaying image: {str(e)}")
def update_status(self, filename):
"""Update the status bar with image information"""
if self.original_image:
# Get just the filename without the full path
basename = os.path.basename(filename)
# Get image dimensions
width = self.original_image.width
height = self.original_image.height
# Get image format
image_format = getattr(self.original_image, 'format', 'Unknown')
# Update status displays
self.status_text.config(text=f"Loaded: {basename}")
self.image_info.config(text=f"{width} × {height} • {image_format}")
def zoom_in(self):
"""Make the image bigger"""
if self.original_image and self.zoom_level < 10.0: # Max zoom: 1000%
self.zoom_level *= 1.2 # Increase by 20%
self.update_display()
def zoom_out(self):
"""Make the image smaller"""
if self.original_image and self.zoom_level > 0.1: # Min zoom: 10%
self.zoom_level /= 1.2 # Decrease by 20%
self.update_display()
def reset_size(self):
"""Reset image to its original size (100%)"""
if self.original_image:
self.zoom_level = 1.0
self.center_image()
self.update_display()
def fit_to_window(self):
"""Resize image to fit in the window"""
if not self.original_image:
return
# Make sure window size is updated
self.root.update_idletasks()
# Get canvas size
canvas_width = self.canvas.winfo_width()
canvas_height = self.canvas.winfo_height()
# Only proceed if canvas has valid size
if canvas_width > 50 and canvas_height > 50:
# Calculate how much we need to zoom to fit
zoom_x = (canvas_width - 20) / self.original_image.width #Leave 20px margin
zoom_y = (canvas_height - 20) / self.original_image.height
# Use the smaller zoom so image fits completely
self.zoom_level = min(zoom_x, zoom_y, 1.0) # Don't zoom larger than 100%
# Center the image
self.center_image()
self.update_display()
def start_drag(self, event):
"""Start dragging the image"""
self.drag_start_x = event.x
self.drag_start_y = event.y
self.canvas.configure(cursor='fleur') # Four-arrow cursor
def drag_image(self, event):
"""Move the image while dragging"""
if self.original_image:
# Calculate how far the mouse moved
dx = event.x - self.drag_start_x
dy = event.y - self.drag_start_y
# Move the image by that amount
self.image_x += dx
self.image_y += dy
# Update starting position for next movement
self.drag_start_x = event.x
self.drag_start_y = event.y
# Update the display
self.update_display()
def end_drag(self, event):
"""Stop dragging the image"""
self.canvas.configure(cursor='crosshair') # Back to normal cursor
def main():
"""Create and run the image viewer application"""
# Create the main window
root = tk.Tk()
# Create our image viewer
app = ImageZoomApp(root)
# Start the application
root.mainloop()
# Run the program
if __name__ == "__main__":
main()
The Final Result:
Download Projects Source Code
