【Python/tkinter】キャンバス上にリサイズした画像を表示したい

Question

tkinterで作成したキャンバス上に、リサイズした画像を表示したい

　tkinterでGUIを作成しています。
cv2で読み込んだ画像をリサイズして、tkinterで作成したキャンバス上に表示したいのですが、うまくいきません。

詳細は以下です。
お詳しい方、ご回答よろしくお願いします。

発生している問題

　下のコードを実行すると、画像が表示されていない空の画面が出てきます。
エラーメッセージは出ていません。

　　現在直面している問題は、以下です。
・ImageTk.PhotoImageで読み込むと、画像がキャンバスに表示されない
・tk.PhotoImageで読み込もうとすると、既に存在するパスからでないと画像が読み込めない
・ImageTk.PhotoImageで読み込むと、引数にmaster=rootを入れられない

該当のソースコード

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

root=tk.Tk()
root.title("gazou")

img = cv2.imread(r"C:\~~~\sample.png")
hi = img.shape[0]
wi = img.shape[1]

#画像をリサイズ
wi2 = wi*(3/4)
hi2 = hi*(3/4)
img2 = cv2.resize(img, (int(wi2), int(hi2)))

#tkinterで扱える形式に画像を変換
img2 = cv2.cvtColor(img2, cv2.COLOR_BGR2RGB)
img2 = Image.fromarray(img2)
img3 = ImageTk.PhotoImage(img2)

#フレーム
fra = tk.Frame()
fra.pack()

#キャンバス
root.minsize(int(wi2), 600)
canvas = tk.Canvas(fra, bg="gray94", width=int(wi2), height=600)
canvas.place(x=0, y=0)
canvas.create_image(0, 0, image=img3, anchor=tk.CENTER)

root.mainloop()

試したこと

①img3 = ImageTk.PhotoImage(img2)
の後ろに下記の一行を追加したところ、このようなエラーが出ました。正しい書き方ではないようです。

>>> img4 = tk.PhotoImage(file=img3, master=root)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "C:\Users\a284b\anaconda3\envs\Orochi\lib\tkinter\__init__.py", line 4061, in __init__
    Image.__init__(self, 'photo', name, cnf, master, **kw)
  File "C:\Users\a284b\anaconda3\envs\Orochi\lib\tkinter\__init__.py", line 4006, in __init__
    self.tk.call(('image', 'create', imgtype, name,) + options)
_tkinter.TclError: couldn't open "pyimage1": no such file or directory

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

Windows10
Python 3.8.3
opencv 4.4.0
pillow 7.2.0
tk 8.6.10

Answer 1

画像のキャンバスへの描画は問題ありません。
tkinter のウィジェットのレイアウト問題の様です。

現状:
Frame を pack() で引数なしで配置していて、
その上の Canvas は place() で配置。

root.minsize でウィンドウのサイズ指定はしていますが、
ウィジェットに対するサイズ指定がありません。

その結果、FrameやCanvasは最小限のサイズで配置され、
ウィジェット自体が見えなくなっています。

解決策:
fra.pack(fill=tk.BOTH, expand=True) で、
フレームのサイズをウィンドウに合わせて下さい。

また、create_imageで指定する座標は、左上の座標ではなく
画像の中心座標で指定なので、0,0 ではなく wi2, hi2 の半分の値 が適切です。
canvas.create_image(wi2//2, hi2//2, image=img3, anchor=tk.CENTER)

---

・ImageTk.PhotoImageで読み込むと、画像がキャンバスに表示されない

上述のレイアウト問題です。

・tk.PhotoImageで読み込もうとすると、既に存在するパスからでないと画像が読み込めない

fileで指定する場合はその通りです。

他に data で読む方法もありますが、対応してない形式なので割愛して、
tk.PhotoImage では対応してないので読み込めません。

PIL(Pillow) で扱う画像を読み込むのは、ImageTk.PhotoImage を使うのが正解です。

・ImageTk.PhotoImageで読み込むと、引数にmaster=rootを入れられない

これは問題なく出来るはずです。

上記のコードで img3 = ImageTk.PhotoImage(img2, master=root) は出来ました。

img4 = tk.PhotoImage(file=img3, master=root)

img3 は PhotoImage オブジェクトですが、tkinter でのオブジェクトの値は
tcl/tk ライブラリとやり取りする時に文字列として評価され、
tcl/tk で管理しているリソースのIDの文字列になります。

pyimage1 は、PhotoImage オブジェクトに連番で自動的に付けられるIDで、
tk.PhotoImage のfileに指定したのでは、その名前のファイルを探しに行ってます。

---

参考までに、デバッグ方法

cv2で読み込んだ画像の確認
cv2.imshow で画像が正常であることを確認する。

tkinter のウィジェット表示の確認
FrameやCanvasに背景色を指定して、ウィジェット自身が表示されていることを確認する。

Comments

[netz-eng]

ご回答ありがとうございます！
一発で解決しました……！

> ImageTk.PhotoImageで読み込むと、引数にmaster=rootを入れられない
以前試したときはこの項目のようなエラーが出たのですが、恐らく別のところで発生したエラーに巻き込まれる形で起こったものと思われます。

自分一人では、諸々勘違いしたままでした。
本当にありがとうございました。