Créer une visionneuse d'images avec Tkinter

1.Tout d'abord

Dans l'article précédent, j'ai présenté ** Tkinter template **. Dans cet article, je vais vous présenter comment créer une application Image Viewer basée sur ce modèle.

environnement

Windows 10 64 bit Python 3.7 IDE : Pycharm

2. Présentation de la visionneuse d'images

La figure suivante montre une image perforée de l'application Image Viewer créée cette fois. .. La seule fonction de cette application est de sélectionner un fichier image et d'afficher cette image. Ensuite, ajoutez la fonction pour désactiver l'écran d'affichage et la fonction pour fermer l'application.

«La personne sur la photo est le professeur Ralph, une autorité en immunologie américaine. ''

3. Conception de la visionneuse d'images

La figure suivante montre la disposition de la visionneuse d'images.

Préparez le widget **, qui fait partie ** de l'application. 1.Canvas Widget: Une boîte pour afficher les images. 2. Widget de cadre d'étiquette: préparez trois boutons, mais une boîte pour rassembler ces boutons. 3.Bouton: Trois boutons: Charger l'image, effacer l'image, quitter l'application.

Utilisez la méthode de la grille pour placer chaque widget.

Description du modèle Tkinter

** Ceci est le code de programme du modèle introduit dans Tkinter Templated Article.

Configuration du modèle

1. Classe d'application Paramètres et placement du widget, définir la fonction de rappel d'événement
2. fonction principale

Dans ce modèle, ** assemblez le code par la procédure de configuration et d'organisation du widget décrite dans le chapitre précédent et en entrant dans la fonction de rappel d'événement. ** (charpente → chair)

import tkinter as tk
from tkinter import ttk

class Application(tk.Frame):
    def __init__(self,master):
        super().__init__(master)
        self.pack()

        self.master.geometry("300x300")
        self.master.title("Tkinter with Class Template")

        self.create_widgets()

    def create_widgets(self):
        pass

    def callBack(self):
        pass

def main():
    root = tk.Tk()
    app = Application(master=root)#Inherit
    app.mainloop()

if __name__ == "__main__":
    main()

3.1. Paramètres du canevas

Définissez et placez le widget Canvas dans la partie méthode create_widgets de l'application de classe. Utilisez la méthode Grid pour le placement.

    def create_widgets(self):
        #Canvas
        self.canvas1 = tk.Canvas(self)
        self.canvas1.configure(width=640, height=480, bg='orange')
        self.canvas1.create_rectangle(0,0,120, 70, fill='green')
        self.canvas1.grid(column=1, row=0)
        self.canvas1.grid(padx=20, pady=20)

3.2.File Open -> Image Load C'est la partie qui ouvre le fichier et charge le fichier image. Après avoir défini le Button, définissez le loadImage () de la fonction de rappel d'événement. L'instruction if à l'intérieur de LoadImage () a été ajoutée pour voir le rapport hauteur / largeur de l'image et redimensionner l'image d'origine pour l'adapter à la taille du canevas. Ensuite, au fur et à mesure de la conversion du fichier image, la partie de la conversion RVB d'openCV, de la conversion en PIL et de la conversion en imageTK se poursuit. Enfin, utilisez self.canvas1.create_image pour afficher l'image dans le widget Canvas.

    def create_widgets(self):
       
        #File open and Load Image
        self.button_open = ttk.Button(self.frame_button)
        self.button_open.configure(text = 'Load Image')
        self.button_open.grid(column=0, row=1)
        self.button_open.configure(command=self.loadImage)
       
    # Event Call Back
    def loadImage(self):

        self.filename = filedialog.askopenfilename()
        
        self.image_bgr = cv2.imread(self.filename)
        
        self.height, self.width = self.image_bgr.shape[:2]
        if self.width > self.height:
            self.new_size = (640,480)
        else:
            self.new_size = (480,480)
        
        self.image_bgr_resize = cv2.resize(self.image_bgr, self.new_size, interpolation=cv2.INTER_AREA)
        self.image_rgb = cv2.cvtColor( self.image_bgr_resize, cv2.COLOR_BGR2RGB )  #Comme imread est BGR, il est converti en RVB
        self.image_PIL = Image.fromarray(self.image_rgb) #Conversion du format RVB au format PIL
        self.image_tk = ImageTk.PhotoImage(self.image_PIL) #Convertir au format ImageTk
        self.canvas1.create_image(320,240, image=self.image_tk)

La figure ci-dessous est l'image capturée lors de l'ouverture du fichier. Pour utiliser cette fonction, utilisez fileialog.askopenfilename (). Cependant, si le nom du dossier contient des caractères japonais (UTF-8), une erreur se produit. Cette fois, veuillez vous assurer que le nom du dossier dans lequel les fichiers image sont stockés est en anglais. (Si vous savez comment résoudre ce problème, veuillez laisser un message.)

3.3. Effacer l'écran

C'est une fonction pour éteindre l'écran sur Canvas. Utilisez la méthode canvas.delete ().

    def clearImage(self):
        self.canvas1.delete("all")

3.4. Bouton Quitter

À la fin, la MessageBox s'affiche et le jugement de l'utilisateur est à nouveau confirmé comme "Êtes-vous sûr de vouloir terminer?"

    def quit_app(self):
        self.Msgbox = tk.messagebox.askquestion("Exit Applictaion", "Are you sure?", icon="warning")
        if self.Msgbox == "yes":
            self.master.destroy()
        else:
            tk.messagebox.showinfo("Return", "you will now return to application screen")

La figure ci-dessous montre l'écran lorsque la MessageBox est affichée.

4. Résultat de l'exécution

La figure suivante montre le résultat de l'exécution. Il a été confirmé que cela fonctionne comme prévu. Il a été confirmé que Clear Image et Quit sont également OK.

5. Résumé

1. J'ai créé une application de visualisation d'images en utilisant le modèle de base de Tkinter.
2. Nous avons confirmé qu'il est possible de créer des applications à des fins diverses en ajoutant les widgets nécessaires au modèle de base.
3. C'est plutôt bien. Tkinter.

6. Code général

import tkinter as tk
from tkinter import ttk

import sys
import os
from tkinter import *
from tkinter import messagebox,filedialog
import numpy as np
from PIL import Image, ImageTk
import cv2
# coding: utf-8
#Je n'ai pas pu mettre de caractères japonais dans le nom du dossier.


class Application(tk.Frame):
    def __init__(self,master):
        super().__init__(master)
        self.pack()

        self.master.geometry("800x600")
        self.master.title("Tkinter with Class Template")

        self.create_widgets()



    def create_widgets(self):
        #Canvas
        self.canvas1 = tk.Canvas(self)
        self.canvas1.configure(width=640, height=480, bg='orange')
        self.canvas1.create_rectangle(0,0,120, 70, fill='green')
        self.canvas1.grid(column=1, row=0)
        self.canvas1.grid(padx=20, pady=20)

        #Frame
        self.frame_button = ttk.LabelFrame(self)
        self.frame_button.configure(text=' Button Frame ')
        self.frame_button.grid(column=1,row=1)
        self.frame_button.grid(padx=20, pady=20)

        #File open and Load Image
        self.button_open = ttk.Button(self.frame_button)
        self.button_open.configure(text = 'Load Image')
        self.button_open.grid(column=0, row=1)
        self.button_open.configure(command=self.loadImage)

        # Clear Button
        self.button_clear = ttk.Button( self.frame_button )
        self.button_clear.configure( text='Clear Image' )
        self.button_clear.grid( column=1, row=1 )
        self.button_clear.configure(command=self.clearImage)

        # Quit Button
        self.button_quit = ttk.Button( self.frame_button )
        self.button_quit.config( text='Quit' )
        self.button_quit.grid( column=2, row=1 )
        self.button_quit.configure(command = self.quit_app)

    # Event Call Back
    def loadImage(self):

        #self.folder_name = filedialog.askdirectory()
        self.filename = filedialog.askopenfilename()
        #print(self.folder_name)
        print(self.filename)

        self.image_bgr = cv2.imread(self.filename)
        self.height, self.width = self.image_bgr.shape[:2]
        print(self.height, self.width)
        if self.width > self.height:
            self.new_size = (640,480)
        else:
            self.new_size = (480,480)

        self.image_bgr_resize = cv2.resize(self.image_bgr, self.new_size, interpolation=cv2.INTER_AREA)
        self.image_rgb = cv2.cvtColor( self.image_bgr_resize, cv2.COLOR_BGR2RGB )  #Comme imread est BGR, il est converti en RVB

       # self.image_rgb = cv2.cvtColor(self.image_bgr, cv2.COLOR_BGR2RGB) #Comme imread est BGR, il est converti en RVB
        self.image_PIL = Image.fromarray(self.image_rgb) #Conversion du format RVB au format PIL
        self.image_tk = ImageTk.PhotoImage(self.image_PIL) #Convertir au format ImageTk
        self.canvas1.create_image(320,240, image=self.image_tk)


    def clearImage(self):
        self.canvas1.delete("all")
    
    def quit_app(self):
        self.Msgbox = tk.messagebox.askquestion("Exit Applictaion", "Are you sure?", icon="warning")
        if self.Msgbox == "yes":
            self.master.destroy()
        else:
            tk.messagebox.showinfo("Return", "you will now return to application screen")

def main():
    root = tk.Tk()
    app = Application(master=root)#Inherit
    app.mainloop()

if __name__ == "__main__":
    main()

7. Documents de référence

1. Modèle de classification Tkinter
2. [Python] Essayez d'utiliser le canevas de Tkinter
3. Afficher l'image OpenCV-Python dans la fenêtre créée par Tkinter