MENU
  1. Accueil
  2. Python
  3. Affichage et manipulation d’images avec Tkinter en Python : Guide simplifié

Affichage et manipulation d’images avec Tkinter en Python : Guide simplifié

Python

Python est un langage de programmation puissant utilisé dans de nombreux domaines. Parmi ses nombreuses bibliothèques, Tkinter est la bibliothèque standard d’interface graphique (GUI) de Python, largement utilisée tant par les débutants que par les experts. Cet article explique comment afficher des images et effectuer des manipulations de base à l’aide de Tkinter. À travers des exemples concrets et des exercices, vous apprendrez en mettant les mains à la pâte.

Sommaire

Présentation de Tkinter

Tkinter est un outil de création d’interfaces graphiques fourni en standard avec la bibliothèque de Python. Il fonctionne sous Windows, macOS et Linux, et permet de créer des interfaces simples et intuitives. Parmi ses avantages, on peut citer la facilité d’installation, une variété de widgets disponibles, ainsi que le soutien de la communauté. En utilisant Tkinter, il est facile d’ajouter des éléments visuels aux programmes Python.

Installation de Tkinter

Tkinter fait partie de la bibliothèque standard de Python et est généralement inclus lors de l’installation de Python. Toutefois, il peut être nécessaire de l’installer séparément selon le système d’exploitation.

Installation sous Windows

Sous Windows, Tkinter est automatiquement installé avec Python. Aucune étape supplémentaire n’est nécessaire.

Installation sous macOS

Sur macOS, Tkinter est inclus lors de l’installation de Python. Cependant, sur les versions plus anciennes de macOS, il peut être nécessaire d’installer Python et Tkinter séparément. Dans ce cas, la commande suivante permet d’effectuer l’installation :

brew install python-tk

Installation sous Linux

Sous Linux, il peut être nécessaire d’installer séparément Python et Tkinter. La commande suivante permet d’effectuer l’installation :

sudo apt-get install python3-tk

Une fois l’installation de Tkinter terminée, vous pouvez passer à la création d’un programme utilisant Tkinter.

Préparation pour l’affichage d’images

Pour afficher des images, nous utiliserons la bibliothèque Tkinter ainsi que Pillow (PIL), une bibliothèque de traitement d’images. Pillow est un fork de la Python Imaging Library (PIL), pratique pour ouvrir et manipuler des images. Voici comment installer Pillow et se préparer à afficher des images avec Tkinter.

Installation de Pillow

Commencez par installer Pillow avec la commande suivante :

pip install pillow

Configuration de base

Le code suivant montre comment importer Tkinter et Pillow, et créer une fenêtre de base :

import tkinter as tk
from PIL import Image, ImageTk

# Création de la fenêtre principale
root = tk.Tk()
root.title("Affichage d'image")

# Définition de la taille de la fenêtre
root.geometry("800x600")

# Chargement de l'image
image = Image.open("path/to/your/image.jpg")
photo = ImageTk.PhotoImage(image)

# Création du widget Label pour afficher l'image
label = tk.Label(root, image=photo)
label.pack()

# Affichage de la fenêtre
root.mainloop()

Ce code crée une fenêtre Tkinter de base et affiche l’image spécifiée. Passons maintenant aux exemples concrets de code.

Exemple de code pour afficher une image

Voici un exemple de code pour afficher une image en utilisant Tkinter et Pillow :

Code complet

import tkinter as tk
from PIL import Image, ImageTk

# Création de la fenêtre principale
root = tk.Tk()
root.title("Affichage d'image")

# Définition de la taille de la fenêtre
root.geometry("800x600")

# Chargement de l'image
image_path = "path/to/your/image.jpg"
image = Image.open(image_path)
photo = ImageTk.PhotoImage(image)

# Création du widget Label pour afficher l'image
label = tk.Label(root, image=photo)
label.image = photo  # Nécessaire pour conserver la référence
label.pack()

# Affichage de la fenêtre
root.mainloop()

Explication du code

  • import tkinter as tk : Importe le module Tkinter.
  • from PIL import Image, ImageTk : Importe les modules Image et ImageTk de la bibliothèque Pillow.
  • root = tk.Tk() : Crée la fenêtre principale.
  • root.title("Affichage d'image") : Définit le titre de la fenêtre.
  • root.geometry("800x600") : Définit la taille de la fenêtre à 800×600 pixels.
  • image_path = "path/to/your/image.jpg" : Spécifie le chemin du fichier image à afficher.
  • image = Image.open(image_path) : Charge le fichier image.
  • photo = ImageTk.PhotoImage(image) : Convertit l’image en un format compatible avec Tkinter.
  • label = tk.Label(root, image=photo) : Crée un widget Label pour afficher l’image.
  • label.image = photo : Conserve la référence à l’image. Sans cela, l’image peut ne pas s’afficher correctement.
  • label.pack() : Place le widget Label dans la fenêtre.
  • root.mainloop() : Lance la boucle principale et affiche la fenêtre.

En exécutant ce code, l’image spécifiée s’affichera dans la fenêtre Tkinter. Nous allons maintenant voir comment redimensionner une image.

Comment redimensionner une image

Pour redimensionner une image lors de l’utilisation de Tkinter et Pillow, il est utile de connaître les différentes méthodes permettant d’ajuster la taille d’une image selon les besoins de l’application ou les préférences de l’utilisateur.

Exemple de code pour redimensionner une image

Le code suivant montre comment redimensionner une image à une taille spécifique avant de l’afficher :

import tkinter as tk
from PIL import Image, ImageTk

# Création de la fenêtre principale
root = tk.Tk()
root.title("Redimensionnement d'image")

# Définition de la taille de la fenêtre
root.geometry("800x600")

# Chargement de l'image
image_path = "path/to/your/image.jpg"
image = Image.open(image_path)

# Redimensionnement de l'image (exemple : 400x300 pixels)
resized_image = image.resize((400, 300), Image.ANTIALIAS)
photo = ImageTk.PhotoImage(resized_image)

# Création du widget Label pour afficher l'image redimensionnée
label = tk.Label(root, image=photo)
label.image = photo  # Nécessaire pour conserver la référence
label.pack()

# Affichage de la fenêtre
root.mainloop()

Explication du code

  • image = Image.open(image_path) : Charge le fichier image.
  • resized_image = image.resize((400, 300), Image.ANTIALIAS) : Redimensionne l’image à 400×300 pixels. Image.ANTIALIAS est utilisé pour un redimensionnement de haute qualité.
  • photo = ImageTk.PhotoImage(resized_image) : Convertit l’image redimensionnée en un format compatible avec Tkinter.
  • label = tk.Label(root, image=photo) : Crée un widget Label pour afficher l’image.
  • label.image = photo : Conserve la référence à l’image.
  • label.pack() : Place le widget Label dans la fenêtre.
  • root.mainloop() : Lance la boucle principale et affiche la fenêtre.

En exécutant ce code, l’image redimensionnée s’affichera dans la fenêtre Tkinter. Voyons ensuite comment effectuer une rotation et un retournement de l’image.

Rotation et retournement d’une image

Il est possible de non seulement afficher une image, mais aussi de la faire pivoter ou de la retourner à l’aide de Tkinter et Pillow. Voici comment procéder, illustré par des exemples de code.

Exemple de code pour faire pivoter une image

Le code suivant montre comment faire pivoter une image de 90 degrés :

import tkinter as tk
from PIL import Image, ImageTk

# Création de la fenêtre principale
root = tk.Tk()
root.title("Rotation d'image")

# Définition de la taille de la fenêtre
root.geometry("800x600")

# Chargement de l'image
image_path = "path/to/your/image.jpg"
image = Image.open(image_path)

# Rotation de l'image de 90 degrés
rotated_image = image.rotate(90)
photo = ImageTk.PhotoImage(rotated_image)

# Création du widget Label pour afficher l'image pivotée
label = tk.Label(root, image=photo)
label.image = photo  # Nécessaire pour conserver la référence
label.pack()

# Affichage de la fenêtre
root.mainloop()

Exemple de code pour retourner une image

Le code suivant montre comment retourner une image horizontalement ou verticalement :

import tkinter as tk
from PIL import Image, ImageTk

# Création de la fenêtre principale
root = tk.Tk()
root.title("Retournement d'image")

# Définition de la taille de la fenêtre
root.geometry("800x600")

# Chargement de l'image
image_path = "path/to/your/image.jpg"
image = Image.open(image_path)

# Retournement horizontal de l'image
flipped_image = image.transpose(Image.FLIP_LEFT_RIGHT)
photo = ImageTk.PhotoImage(flipped_image)

# Création du widget Label pour afficher l'image retournée
label = tk.Label(root, image=photo)
label.image = photo  # Nécessaire pour conserver la référence
label.pack()

# Affichage de la fenêtre
root.mainloop()

Explication du code

  • rotated_image = image.rotate(90) : Fait pivoter l’image de 90 degrés. L’angle de rotation peut être personnalisé.
  • flipped_image = image.transpose(Image.FLIP_LEFT_RIGHT) : Retourne l’image horizontalement. Utilisez Image.FLIP_TOP_BOTTOM pour un retournement vertical.
  • photo = ImageTk.PhotoImage(rotated_image) ou photo = ImageTk.PhotoImage(flipped_image) : Convertit l’image en un format compatible avec Tkinter.
  • label = tk.Label(root, image=photo) : Crée un widget Label pour afficher l’image.
  • label.image = photo : Conserve la référence à l’image.
  • label.pack() : Place le widget Label dans la fenêtre.
  • root.mainloop() : Lance la boucle principale et affiche la fenêtre.

Vous avez maintenant appris à faire pivoter et à retourner une image. Passons à la gestion des événements de la souris sur l’image.

Gestion des événements de la souris

Avec Tkinter, il est possible de gérer des événements de la souris sur une image. Nous allons montrer comment capturer des événements tels que les clics ou les glissements de la souris sur l’image, et comment réagir à ces événements.

Gestion des événements de clic sur l’image

Le code suivant montre comment obtenir les coordonnées du point cliqué sur l’image et afficher du texte à cet endroit :

import tkinter as tk
from PIL import Image, ImageTk

# Création de la fenêtre principale
root = tk.Tk()
root.title("Gestion des événements de la souris sur l'image")

# Définition de la taille de la fenêtre
root.geometry("800x600")

# Chargement de l'image
image_path = "path/to/your/image.jpg"
image = Image.open(image_path)
photo = ImageTk.PhotoImage(image)

# Création du widget Canvas pour afficher l'image
canvas = tk.Canvas(root, width=800, height=600)
canvas.pack()
canvas.create_image(0, 0, anchor=tk.NW, image=photo)

# Fonction de gestion de l'événement de clic
def on_click(event):
    # Obtention des coordonnées du clic
    x, y = event.x, event.y
    # Affichage du texte aux coordonnées du clic
    canvas.create_text(x, y, text=f"({x}, {y})", fill="red")

# Liaison de l'événement de clic sur le Canvas
canvas.bind("<Button-1>", on_click)

# Affichage de la fenêtre
root.mainloop()

Explication du code

  • canvas = tk.Canvas(root, width=800, height=600) : Crée un widget Canvas.
  • canvas.create_image(0, 0, anchor=tk.NW, image=photo) : Affiche l’image sur le Canvas.
  • def on_click(event) : Définit une fonction pour gérer l’événement de clic. Les coordonnées du clic sont obtenues avec event.x et event.y.
  • canvas.create_text(x, y, text=f"({x}, {y})", fill="red") : Affiche les coordonnées du clic sur l’image.
  • canvas.bind("<Button-1>", on_click) : Lie l’événement de clic gauche à la fonction on_click.

Gestion des événements de glissement de la souris sur l’image

Le code suivant montre comment gérer les événements de glissement de la souris pour dessiner le trajet du glissement sur l’image :

import tkinter as tk
from PIL import Image, ImageTk

# Création de la fenêtre principale
root = tk.Tk()
root.title("Gestion des événements de glissement de la souris")

# Définition de la taille de la fenêtre
root.geometry("800x600")

# Chargement de l'image
image_path = "path/to/your/image.jpg"
image = Image.open(image_path)
photo = ImageTk.PhotoImage(image)

# Création du widget Canvas pour afficher l'image
canvas = tk.Canvas(root, width=800, height=600)
canvas.pack()
canvas.create_image(0, 0, anchor=tk.NW, image=photo)

# Fonction de gestion de l'événement de glissement
def on_drag(event):
    # Obtention des coordonnées de glissement
    x, y = event.x, event.y
    # Dessin du trajet de glissement
    canvas.create_oval(x-2, y-2, x+2, y+2, fill="blue", outline="blue")

# Liaison de l'événement de glissement à la fonction on_drag
canvas.bind("<B1-Motion>", on_drag)

# Affichage de la fenêtre
root.mainloop()

Explication du code

  • def on_drag(event) : Définit une fonction pour gérer l’événement de glissement. Les coordonnées sont obtenues avec event.x et event.y.
  • canvas.create_oval(x-2, y-2, x+2, y+2, fill="blue", outline="blue") : Dessine un petit cercle aux coordonnées de glissement, permettant de visualiser le trajet.
  • canvas.bind("<B1-Motion>", on_drag) : Lie l’événement de glissement de la souris gauche à la fonction on_drag.

Vous avez maintenant appris à gérer les événements de clic et de glissement de la souris sur une image. Appliquons ces connaissances pour créer un éditeur d’images simple.

Exemple d’application : Création d’un éditeur d’images

En utilisant ce que nous avons appris avec Tkinter et Pillow, nous allons créer un éditeur d’images simple. Cet éditeur pourra afficher, redimensionner, faire pivoter, retourner les images, et gérer les événements de la souris.

Exemple de code pour un éditeur d’images basique

Voici un exemple de code qui implémente les fonctionnalités de base d’un éditeur d’images :

import tkinter as tk
from tkinter import filedialog
from PIL import Image, ImageTk

class ImageEditor:
    def __init__(self, root):
        self.root = root
        self.root.title("Éditeur d'images simple")
        self.root.geometry("800x600")

        self.canvas = tk.Canvas(root, width=800, height=600)
        self.canvas.pack()

        self.menu = tk.Menu(root)
        root.config(menu=self.menu)

        file_menu = tk.Menu(self.menu)
        self.menu.add_cascade(label="Fichier", menu=file_menu)
        file_menu.add_command(label="Ouvrir", command=self.open_image)
        file_menu.add_command(label="Enregistrer", command=self.save_image)

        edit_menu = tk.Menu(self.menu)
        self.menu.add_cascade(label="Édition", menu=edit_menu)
        edit_menu.add_command(label="Redimensionner", command=self.resize_image)
        edit_menu.add_command(label="Pivoter", command=self.rotate_image)
        edit_menu.add_command(label="Retourner", command=self.flip_image)

        self.image = None
        self.photo = None

        self.canvas.bind("<B1-Motion>", self.paint)

    def open_image(self):
        file_path = filedialog.askopenfilename()
        if file_path:
            self.image = Image.open(file_path)
            self.photo = ImageTk.PhotoImage(self.image)
            self.canvas.create_image(0, 0, anchor=tk.NW, image=self.photo)

    def save_image(self):
        file_path = filedialog.asksaveasfilename(defaultextension=".jpg")
        if file_path and self.image:
            self.image.save(file_path)

    def resize_image(self):
        if self.image:
            self.image = self.image.resize((400, 300), Image.ANTIALIAS)
            self.photo = ImageTk.PhotoImage(self.image)
            self.canvas.create_image(0, 0, anchor=tk.NW, image=self.photo)

    def rotate_image(self):
        if self.image:


            self.image = self.image.rotate(90)
            self.photo = ImageTk.PhotoImage(self.image)
            self.canvas.create_image(0, 0, anchor=tk.NW, image=self.photo)

    def flip_image(self):
        if self.image:
            self.image = self.image.transpose(Image.FLIP_LEFT_RIGHT)
            self.photo = ImageTk.PhotoImage(self.image)
            self.canvas.create_image(0, 0, anchor=tk.NW, image=self.photo)

    def paint(self, event):
        if self.image:
            x, y = event.x, event.y
            self.canvas.create_oval(x-2, y-2, x+2, y+2, fill="blue", outline="blue")

if __name__ == "__main__":
    root = tk.Tk()
    app = ImageEditor(root)
    root.mainloop()

Explication du code

  • La classe ImageEditor contient les fonctionnalités principales de l’éditeur d’images.
  • La méthode __init__ configure la fenêtre, le Canvas, et le menu.
  • La méthode open_image permet d’ouvrir un fichier image et de l’afficher sur le Canvas.
  • La méthode save_image permet d’enregistrer l’image actuelle dans un fichier.
  • La méthode resize_image redimensionne l’image.
  • La méthode rotate_image fait pivoter l’image de 90 degrés.
  • La méthode flip_image retourne l’image horizontalement.
  • La méthode paint gère les événements de glissement et dessine un cercle bleu sur le Canvas.

Ce petit éditeur d’images peut être enrichi pour créer des outils de traitement d’images plus avancés. Continuons avec des exercices pour consolider les concepts appris.

Exercices et solutions

Ces exercices vous permettront de réviser les concepts abordés et d’approfondir vos connaissances sur l’affichage et la manipulation d’images avec Tkinter et Pillow. Voici les exercices suivis de leurs solutions.

Exercice 1 : Redimensionner une image

Ajoutez une fonction pour redimensionner l’image à une taille spécifique (par exemple, largeur de 300 pixels et hauteur de 200 pixels).

Solution

Ajoutez la fonctionnalité de redimensionnement au code suivant :

def resize_image(self):
    if self.image:
        self.image = self.image.resize((300, 200), Image.ANTIALIAS)
        self.photo = ImageTk.PhotoImage(self.image)
        self.canvas.create_image(0, 0, anchor=tk.NW, image=self.photo)

Exercice 2 : Sauvegarder l’image

Permettez à l’utilisateur de spécifier le nom du fichier lors de la sauvegarde de l’image.

Solution

Ajoutez la fonctionnalité de sauvegarde au code suivant :

def save_image(self):
    file_path = filedialog.asksaveasfilename(defaultextension=".jpg")
    if file_path and self.image:
        self.image.save(file_path)

Exercice 3 : Spécifier l’angle de rotation de l’image

Ajoutez une fonction permettant de faire pivoter l’image selon un angle spécifié par l’utilisateur (par exemple, 45 degrés).

Solution

Ajoutez la fonctionnalité de rotation au code suivant :

def rotate_image(self):
    if self.image:
        angle = int(input("Entrez l'angle de rotation : "))
        self.image = self.image.rotate(angle)
        self.photo = ImageTk.PhotoImage(self.image)
        self.canvas.create_image(0, 0, anchor=tk.NW, image=self.photo)

Exercice 4 : Afficher plusieurs images successivement

Ajoutez une fonctionnalité permettant de charger et d’afficher plusieurs images l’une après l’autre.

Solution

Ajoutez la fonctionnalité d’affichage multiple au code suivant :

def open_image(self):
    file_paths = filedialog.askopenfilenames()
    if file_paths:
        for file_path in file_paths:
            self.image = Image.open(file_path)
            self.photo = ImageTk.PhotoImage(self.image)
            self.canvas.create_image(0, 0, anchor=tk.NW, image=self.photo)
            self.root.update()  # Mise à jour pour afficher chaque image
            self.root.after(1000)  # Affiche chaque image pendant 1 seconde

Exercice 5 : Changer la couleur du dessin à la souris

Ajoutez une fonctionnalité permettant à l’utilisateur de spécifier la couleur du dessin lors du glissement de la souris.

Solution

Ajoutez la fonctionnalité de changement de couleur au code suivant :

def paint(self, event):
    if self.image:
        x, y = event.x, event.y
        color = input("Entrez la couleur de dessin : ")
        self.canvas.create_oval(x-2, y-2, x+2, y+2, fill=color, outline=color)

Ces exercices vous ont permis de consolider votre compréhension de l’affichage et de la manipulation des images avec Tkinter et Pillow. Terminons par un résumé des points clés abordés.

Conclusion

Dans cet article, nous avons appris à utiliser Tkinter pour afficher et manipuler des images en Python. Nous avons commencé par les bases de Tkinter, puis nous avons exploré la bibliothèque Pillow pour charger, redimensionner, faire pivoter, retourner des images, et gérer les événements de la souris. Enfin, nous avons appliqué ces connaissances pour créer un éditeur d’images simple. En appliquant ces compétences, il est possible de développer des applications de traitement d’images plus complexes. N’hésitez pas à utiliser ces techniques dans vos projets personnels !

Python
Programmation Programmation GUI Python Éditeur d'Image tkinter Bibliothèque Affichage d'Image Manipulation d'Image Événements de la Souris Renverser Rotation Redimensionner
Sommaire