python GUIを利用した画像読込

Question

### 前提・実現したいこと

python初心者です。
勉強がてら画像読込のGUIを作成しております。
自身のPC内のデスクトップ等に保存してある画像（jpeg,tiff）を任意に参照してGUIに設けたcanvasにグレースケールで表示させたいです。
参照ボタンを押すとファイルダイアログが起動し、ファイルを選択、ファイルパスをファイルパス表示欄に表示するところまでは正常に起動します。
他サイトを探してもpythonソースコード内に直接ファイル名を記載する方法はありますが、ファイル選択によるcanvasに表示させる方法が無く、質問させて頂いております。
初心者ですがご教授お願い致します。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

#Tkinterのライブラリを取り込む
import tkinter as tk
from tkinter import filedialog
import cv2
from PIL import Image, ImageTk

def __init__(self, main):
    #ファイル削除処理
    self.file_del()



#ウインドウを作成
win = tk.Tk()
win.title("FLIRカメラチルト確認")#タイトル
win.geometry("500x500")#サイズ

#パーツを配置
#ラベル1を作成
label1 = tk.Label(text='■画像読込')
label1.place(x=10, y=10)
#ラベル2を作成
label2 = tk.Label(text='ファイル名：')
label2.place(x=10, y=40)
#ファイルパスの表示欄を作成
input_box1 = tk.Entry(width=45)
input_box1.place(x=80, y=40)



#参照ボタンの動作 
def button1_clicked(self):
    #ファイルパスを取得  
    idir = r'C:\descktop'
    filepath = tk.filedialog.askdirectory(initialdir = idir)


def file_select():
    #ファイルパスを表示欄に表示
    idir = r'C:\descktop'
    filetype = [("すべて","*")]
    filepath = tk.filedialog.askopenfilename(filetypes = filetype, initialdir = idir)
    input_box1.insert(tk.END, filepath)
    
#Canvasの作成
cv = tk.Canvas(win, width=300-1, height=300-1, bg="white",)
cv.place(x=10, y=70)

#参照ボタン1を作成
button1 = tk.Button(text="参照", command=file_select, width=8)
button1.place(x=430, y=35)

#閉じるボタンを作成
button2 = tk.Button(text="閉じる", command=win.destroy, width=8)
button2.place(x=430, y=450)

#画像を表示
ここのコードが理解しきれず...


#ウインドウを動かす
win.mainloop()

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

環境
python3.6.1
opencv-python4.2.0.34
Pillow7.1.1
windows8

Comments

[teamikl]

インデント情報が失われてるので、
編集 → ＜code＞からソースコードの整形をお願いします。

変数`canvas`が未定義のようですが、エラーは出てませんか？

[tomo754]

コメントありがとうございます。ソースコード記載を整理しました。
また、canvasに該当する箇所がまだ理解できていないのでソースコードは削除しました。
画像表示させるソースコードをご教授して頂けると助かります。

Answer 1

画像を表示するコードは、ファイルを選択した時なので、
file_select() の後ろの方に追加します。

import os

def file_select():
    #ファイルパスを表示欄に表示
    idir = r'C:\descktop'
    filetype = [("すべて","*")]
    filepath = tk.filedialog.askopenfilename(filetypes = filetype, initialdir = idir)
    input_box1.insert(tk.END, filepath)

    # 選択されたファイルの画像を表示
    if filepath and os.path.isfile(filepath):
 
        # PILで画像を開きグレイスケールに変換
        img = Image.open(filepath).convert("L")

        image = ImageTk.PhotoImage(image=img)
        cv.image = image # ※ 重要! 何処かに参照を残す。

        # 表示位置を調整 (画像の中心が指定の座標に来る)
        cv.create_image(image.width()/2, image.height()/2, image=image)

上記サンプルコードは PIL で画像を扱った例です。
OpenCV で読み込む場合等は以下を参照してください。

• Tkinterで作成したウインドウにOpenCV-Pythonの画像を表示
• Python でグレースケール(grayscale)化

---

※ 参照がなくなると、関数を抜けた時点で画像が消えます。

• 参考) PyFAQ: why do my tkinter images not appear

cv.image = image は暫定的な措置です。
参照が残るようにすればなんでもいいので、
もし複数毎の画像を同時に読み込む場合等はリストにいれます。

Comments

[tomo754]

早速の回答を有難う御座います。
試したところ以下のコードでエラーが出ます。
if filepath and os.path.isfile(filepath):
エラー状況
NameError: name 'filepath' is not defined

[teamikl]

直前でダイアログからの戻り値を得ているので、未定義にはならないはずです。
インデントやコードを書く場所等は大丈夫ですか？file_select() の

filepath = tk.filedialog.askopenfilename(filetypes = filetype, initialdir = idir)

の後です。

[tomo754]

インデントの箇所見落としておりました。
上手く表示できました。
有難う御座います。