tkinter, PIL, canvas上に開いた画像の上に更に画像を重ねて配置したい

Question

前提・実現したいこと

canvas上に任意の画像を開く→
スタンプボタンをクリック→
別ウィンドウでスタンプを選択→
選択したスタンプをcanvas上に重ねて表示→
マウス操作で任意の場所に配置

というスタンプ機能を実装したいです。

該当のソースコード

import os,sys
import math
from tkinter import *
from tkinter import ttk
from tkinter import filedialog
from tkinter import messagebox
from tkinter import simpledialog
from PIL import Image, ImageTk, ImageOps
import glob



_maxline = 700

class Application(ttk.Frame):
	def __init__(self, master):
		super().__init__(master)
		self.master = master
		self.master.geometry('620x600+280+240')
		self.grid()
		self.button_create()

	def button_create(self):
		self.photo_var = StringVar()
		ttk.Entry(self.master, textvariable=self.photo_var, width=70).grid(row=0, column=0, pady=100, padx=20)
		self.bln = BooleanVar()
		self.bln.set(True)
		ttk.Button(self.master, text='選択', width=8, command=self.file_select).grid(row=0, column=1, padx=(0, 20))
		ttk.Button(self.master, text='決定', width=8, command=self.image_open).grid(row=0, column=2, padx=(0, 20))

	def file_select(self):
		iDir = os.getenv("HOMEDRIVE") + os.getenv("HOMEPATH") + "\Desktop"
		fTyp = [('','*.jpg;*.jpeg;')]
		filepath = filedialog.askopenfilename(filetypes = fTyp, initialdir = iDir)
		self.photo_var.set(filepath)

	def image_open(self):
		self.image_dir = self.photo_var.get()
		read_image = Image.open(self.image_dir)
		self.xw, self.xh = self.image_resize(read_image)
		self.x_image = read_image.resize((self.xw, self.xh))
		self.image_window()

	def image_resize(self, image):
		magnification = 1
		if image.width > image.height:
			magnification = _maxline / image.width
		else:
			magnification = _maxline / image.height
		w = int(image.width * magnification)
		h = int(image.height * magnification)

		return w, h

	def image_window(self):
		self.photo_window = Toplevel(self.master)
		self.photo_window.title(os.path.basename(self.image_dir) + ' size:%s*%s'% (self.xw, self.xh))
		self.photo_window.geometry('%sx%s+500+240' % (self.xw+1, self.xh+1))
		self.canvas = Canvas(self.photo_window, width=self.xw, height=self.xh)
		self.canvas.grid()
		self.canvas_create(self.x_image)

		buttonlst = {'crop': [50, self.photo_window.destroy], 'mirror': [80, self.photo_window.destroy], 'Rrotate': [110, self.photo_window.destroy], 'Lrotate': [140, self.photo_window.destroy], 'stamp': [170, self.stamp]}
		[ttk.Button(self.canvas, text=key, command=value[1]).place(x=self.xw-100, y=value[0]) for key, value in buttonlst.items()]

	def canvas_create(self, img):
		self.canvas.photo = ImageTk.PhotoImage(image=img)
		self.canvas.create_image(0, 0, anchor='nw', image=self.canvas.photo)

	def stamp(self):
		stamplst = glob.glob('./スタンプ/*.png')
		self.stamp_window = Toplevel(self.photo_window)
		self.stamp_window.geometry('300x360+800+240')
		self.cb = ttk.Combobox(self.stamp_window, state='readonly', width=25)
		self.cb['value'] = stamplst
		self.cb.pack(pady=10)
		self.stamp_canvas = Canvas(self.stamp_window, width=250, height=250)
		self.stamp_canvas.pack(pady=10)

		ttk.Button(self.stamp_window, text='選択', command=self.stamp_selected).pack()

		self.cb.bind('<<ComboboxSelected>>', self.stamp_previous)

	def stamp_previous(self, event):
		read_image = Image.open(self.cb.get())
		self.stamp_image = read_image.resize((250, 250))
		self.stamp_canvas.photo = ImageTk.PhotoImage(image=self.stamp_image)
		self.stamp_canvas.create_image(0, 0, anchor='nw', image=self.stamp_canvas.photo)

	def stamp_selected(self):
		select_stamp = self.cb.get()
		self.stamp_window.destroy()
		stamp = Image.open(select_stamp)
		stamp = stamp.resize((200, 200))
		self.canvas.photo = ImageTk.PhotoImage(image=stamp)
		self.canvas.create_image(0, 0, anchor='nw', image=self.canvas.photo)



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

if __name__ == '__main__':
	main()

サンプルデータ

スタンプに使用するサンプル画像
画像1
画像2

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

python3.8.1
windows10

Comments

[Yasumichi]

Canvas はほかの言語にもあったりするのでタグを tkinter.Canvas とかに修正するか、削除した方が良い気がします。

# タグにマウスオーバーすると HTML5 の canvas として認識されています。

[nto]

タグの削除を致しました。

Answer 1

任意の場所への移動はもう一工夫必要になりますが、
画像を重ねて表示出来てない原因は、

元になる jpg 画像とスタンプの画像全てで
self.canvas.photo を上書きしている為です。

上書きされた時点で、前の画像は破棄されてしまう為、
新しい画像しか表示されません。

解決策:
それぞれ別の属性に保存する。
スタンプを複数使う場合は、予め辞書にでも入れておくとよいです。

# __init__で準備
self.stamp = {}

# スタンプ読み込み時 変数 photo と 辞書に参照を残す
self.stamp[filepath] = photo = ImageTk.PhotoImage(...)
self.canvas.create_image(0, 0, anchor='nw', image=photo)

※ 追記: defaultdictを使った方が良いかもしれません

def load_stamp(filepath):
    return tk.PhotoImage(file=filepath) # 対象が png のみであれば tk でも読込可。

# __init__で準備
# キーが無い時に load_stamp関数が呼び出され PhotoImage を生成
from collections import defaultdict
self.stamp = defaultdict(load_stamp)

# 読み込み時
self.canvas.create_image(0, 0, image=self.stamp[filepath])

---

キャンバス上のオブジェクトの移動

残念ながら勝手に動いてくれるようなオプションはないので、自分で実装する必要があります。

• create_image の戻り値(キャンバスへ描画するオブジェクトのID)を何処かに保存する
• マウスの press/motion/release イベントで移動処理

　- ドラッグ開始時 マウスの座標から 対象のオブジェクトのIDを探す canvas.find_closest
- motion (マウス移動時) オブジェクトのIDを指定して移動 canvas.coords
- release で移動処理の後始末

参考: Canvasの図形や画像をドラッグ・アンド・ドロップで動かす。

---

実は、標準ライブラリ内に tkinter.dndというものがあって、
python -m tkinter.dnd とすると、ICONボタンを動かせるデモが起動するのですが
サンプルコードやドキュメントが少なすぎて、お勧めし辛い。

Comments

[nto]

なるほどです。
画像上にスタンプを生成さえ出来れば、移動に関しては大丈夫そうです。
残念ながら今現在すぐにpcに向かうことが出来ないために翌週よりテストしてみます。

ご回答ありがとうございました！

[nto]

恐れ入ります、スタンプの生成、移動を行う様にする事ができました。
そこでもう一点別途での質問なのですが、画像が2枚重なったとき
スタンプに対して、いわゆるtopmostみたいなものはどの様にして設定できるのでしょうか？

掲題のコードにて、
self.canvas.create_image(0, 0, anchor='nw', image=self.canvas.photo, tags='photo')
と、タグを設定してあげた上で、
def mirror_image(self):
self.canvas.delete('photo')
self.x_image = ImageOps.mirror(self.x_image)
self.canvas_create(self.x_image)
と、反転したimageをキャンバス上に再生成するイベントを動かすと、スタンプが下に重なってしまいます。

[teamikl]

canvas.tag_raise や tag_lower で出来そうです。
使ったことないので、取り急ぎ参考リンクのみ
http://effbot.org/tkinterbook/canvas.htm#Tkinter.Canvas.tag_raise-method

注意点は、tag と item ID の指定方法で
tag では複数のアイテムに対して一括で操作し、
item ID は 個別のアイテムが操作対象になります。
(find_closest やcreate_imageの戻り値)

下地の画像は tag_lower で下げて
スタンプ同士の重なり合いは、クリック時に
canvas.find_closest で座標からアイテムのIDを所得して、
個別にクリックしたアイテムを上レイヤへ引き上げ～といった感じでしょうか。
（※ 動作確認はしてません）

[nto]

度々ご回答ありがとうございます。
まずは試行してみます。

[nto]

先の関数にて再生成した後に
self.canvas.tag_raise('stamp') または self.canvas.tag_lower('photo')
で期待の動きが見られました。

本来はID指定が良いのかとは思いますが
こちらの仕様上tag指定での動作が一番スムーズな形となりましたので
tagを指定しスタンプを常に最前面に配置する事ができました。

[teamikl]

ID指定が必要になるのは、複数のスタンプを重ねる場合ですね。
（同じtag同士の順序を指定できない為）

tag/IDはどちらが良い等ではなく使い分けなので、
期待の動作が得られたのであれば、それで大丈夫です。

[nto]

はい。仕様上、スタンプは1つ以上生成する事はない為、tagの指定が都合良い形になりました。
ありがとうございました。