Python tkinter クラスを用いて画像を表示する方法

まくまく

OpenCVで読み込んだ画像を表示する方法を以前に記事にしましたが、今回はクラスを用いた方法で画像を表示しようと思います。

出力

tkinterで作成したウインドウに画像を表示することができました。

処理の流れとしては以下のようになります。

① tkinterでウインドウやフレーム、キャンバスを作成
② プログラムと同じフォルダにある画像をOpenCVで読み込み
③ 元画像のファイルサイズが大きいのでリサイズを実行
④ tkinterで表示できるよう画像フォーマットを変換
⑤ tkinterへ画像を表示

雛形

import tkinter as tk

class Application(tk.Frame):
    def __init__(self, master = None):
        super().__init__(master)
        self.master.geometry()
        self.master.title('ウインドウ')

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

if __name__ == "__main__":
    main()

クラスを用いてtkinterのウインドウを作成します。上のコードを実行とすると、新しいウインドウが作成されます。今回はこのコードに画像表示できるよう追記していきたいと思います。

画像表示プログラム

#ライブラリのインポート
import tkinter as tk
import cv2
from PIL import Image, ImageTk

class Application(tk.Frame):
    def __init__(self,master = None):
        super().__init__(master)
        self.master.geometry("640x530+50+50")
        self.master.title("ウインドウ")
        #メインフレームを配置
        self.pack()
        #メソッド実行
        self.create_widget()
        self.getimage()

    def create_widget(self):
         #フレームの作成
        self.frame_img = tk.Frame(self.master, width=620, height=500,  padx=10, pady=10, bg="#E6E6E6")
        self.frame_img.place(x=10, y=10)
    
        #キャンバス作成・配置
        self.canvas = tk.Canvas(self.frame_img, width=580, height=460)
        self.canvas.place(x=5, y=5)

    def getimage(self):
        #画像読み込み
        self.img = cv2.imread('photo1.jpeg')
        size = 600
        h, w = self.img.shape[:2]
        cvh = size*h/w
        self.image_bgr = cv2.resize(self.img, (size,int(cvh)))
        self.image_rgb = cv2.cvtColor(self.image_bgr, cv2.COLOR_BGR2RGB)
        self.image_pil = Image.fromarray(self.image_rgb)
        self.image_tk  = ImageTk.PhotoImage(self.image_pil)
        # 画像の描画
        self.canvas.create_image(0, 0, image=self.image_tk, anchor=tk.NW)

def main():
    root = tk.Tk()
    app = Application(master=root)
    app.mainloop()
    
if __name__ == "__main__":
    main()