[Python Tkinter] Canvasウィジェットで画像を表示する方法

pip install Pillow

import tkinter as tk
from PIL import Image, ImageTk

import tkinter as tk
# Tkinterのウィンドウを作成
# ImageTk.PhotoImageより前にTk()を呼び出す必要がある
root = tk.Tk()
root.title("Canvasに画像を表示")
# Canvasウィジェットを作成
canvas = tk.Canvas(root, width=400, height=400)
canvas.pack()

from PIL import Image
# 画像ファイルを読み込む
image_file = "example_image.png"  # 画像ファイル名
image = Image.open(image_file)

from PIL import ImageTk
# 画像をTkinter形式に変換
tk_image = ImageTk.PhotoImage(image)

# Canvasに画像を描画
canvas.create_image(0, 0, anchor=tk.NW, image=tk_image)

# 画像の表示位置を中央に指定
canvas_width = 400
canvas_height = 400
image_width, image_height = image.size
x_position = (canvas_width - image_width) // 2
y_position = (canvas_height - image_height) // 2
canvas.create_image(x_position, y_position, anchor=tk.NW, image=tk_image)

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

# 画像ファイルを読み込む
image_file = "example_image.png"  # 画像ファイル名
image = Image.open(image_file)

# Tkinterのウィンドウを作成
# ImageTk.PhotoImageより前にTk()を呼び出す必要がある
root = tk.Tk()
root.title("Canvasに画像を表示")
# Canvasウィジェットを作成
canvas = tk.Canvas(root, width=400, height=400)
canvas.pack()

# 画像をTkinter形式に変換
tk_image = ImageTk.PhotoImage(image)


# 画像の表示位置を中央に指定
canvas_width = 400
canvas_height = 400
image_width, image_height = image.size
x_position = (canvas_width - image_width) // 2
y_position = (canvas_height - image_height) // 2

# Canvasに画像を描画
canvas.create_image(x_position, y_position, anchor=tk.NW, image=tk_image)

# Tkinterのメインループを開始
root.mainloop()

# 画像のサイズを変更
new_size = (200, 200)  # 新しいサイズ
resized_image = image.resize(new_size)
# Tkinter形式に変換
tk_resized_image = ImageTk.PhotoImage(resized_image)
# Canvasに再描画
canvas.create_image(x_position, y_position, anchor=tk.NW, image=tk_resized_image)

# 画像を90度回転
rotated_image = image.rotate(90)
# Tkinter形式に変換
tk_rotated_image = ImageTk.PhotoImage(rotated_image)
# Canvasに再描画
canvas.create_image(x_position, y_position, anchor=tk.NW, image=tk_rotated_image)

# 画像の透明度を調整
alpha_value = 128  # 0(完全透明)から255(不透明)までの値
image_with_alpha = image.convert("RGBA")
data = image_with_alpha.getdata()
# 透明度を設定
new_data = []
for item in data:
    new_data.append((item[0], item[1], item[2], alpha_value))  # R, G, B, A
image_with_alpha.putdata(new_data)
# Tkinter形式に変換
tk_image_with_alpha = ImageTk.PhotoImage(image_with_alpha)
# Canvasに再描画
canvas.create_image(x_position, y_position, anchor=tk.NW, image=tk_image_with_alpha)

# Canvasをクリア
canvas.delete("all")
# 新しい画像を描画
canvas.create_image(x_position, y_position, anchor=tk.NW, image=tk_image)

# 複数の画像ファイルをリストに格納
image_files = ["image1.png", "image2.png", "image3.png"]
images = []
# 画像を読み込んでリストに追加
for file in image_files:
    img = Image.open(file)
    images.append(img)

# 画像をTkinter形式に変換し、重ねて表示
for i, img in enumerate(images):
    tk_img = ImageTk.PhotoImage(img)
    canvas.create_image(50, 50 + (i * 20), anchor=tk.NW, image=tk_img)

# 異なる座標に画像を表示
canvas.create_image(100, 100, anchor=tk.NW, image=ImageTk.PhotoImage(images[0]))  # 1つ目の画像
canvas.create_image(150, 150, anchor=tk.NW, image=ImageTk.PhotoImage(images[1]))  # 2つ目の画像
canvas.create_image(200, 200, anchor=tk.NW, image=ImageTk.PhotoImage(images[2]))  # 3つ目の画像

# 画像を順番に描画
canvas.create_image(100, 100, anchor=tk.NW, image=ImageTk.PhotoImage(images[0]))  # 1つ目の画像
canvas.create_image(150, 150, anchor=tk.NW, image=ImageTk.PhotoImage(images[1]))  # 2つ目の画像
canvas.create_image(50, 50, anchor=tk.NW, image=ImageTk.PhotoImage(images[2]))  # 3つ目の画像(最前面)

def on_image_click(event):
    print("画像がクリックされました！")
# 画像をCanvasに描画
image_id = canvas.create_image(100, 100, anchor=tk.NW, image=ImageTk.PhotoImage(images[0]))
# 画像にクリックイベントをバインド
canvas.tag_bind(image_id, "<Button-1>", on_image_click)

def on_drag_start(event):
    canvas.drag_data = {"x": event.x, "y": event.y}
def on_drag_motion(event):
    # ドラッグ中の画像の位置を更新
    dx = event.x - canvas.drag_data["x"]
    dy = event.y - canvas.drag_data["y"]
    canvas.move(image_id, dx, dy)
    canvas.drag_data["x"] = event.x
    canvas.drag_data["y"] = event.y
# 画像にドラッグイベントをバインド
canvas.tag_bind(image_id, "<ButtonPress-1>", on_drag_start)
canvas.tag_bind(image_id, "<B1-Motion>", on_drag_motion)

current_image_index = 0
def change_image(event):
    global current_image_index
    current_image_index = (current_image_index + 1) % len(images)  # 次の画像に切り替え
    new_image = ImageTk.PhotoImage(images[current_image_index])
    canvas.itemconfig(image_id, image=new_image)  # 画像を更新
    canvas.image = new_image  # 参照を保持
# 画像にクリックイベントをバインド
canvas.tag_bind(image_id, "<Button-1>", change_image)

import random
# 画像をランダムな位置に表示する関数
def display_random_image():
    x = random.randint(0, 350)
    y = random.randint(0, 350)
    canvas.create_image(x, y, anchor=tk.NW, image=ImageTk.PhotoImage(images[0]))
# クリックイベントの設定
def on_image_click(event):
    print("画像をクリックしました！")
    display_random_image()  # 新しい位置に画像を表示
# 初期画像を表示
display_random_image()
canvas.tag_bind(image_id, "<Button-1>", on_image_click)

# 画像ギャラリーの作成
def create_gallery():
    for i, img in enumerate(images):
        x = (i % 3) * 150  # 3列に配置
        y = (i // 3) * 150
        tk_img = ImageTk.PhotoImage(img)
        image_id = canvas.create_image(x, y, anchor=tk.NW, image=tk_img)
        canvas.tag_bind(image_id, "<Button-1>", lambda event, index=i: enlarge_image(index))
def enlarge_image(index):
    # 画像を拡大表示
    enlarged_image = ImageTk.PhotoImage(images[index].resize((300, 300)))
    canvas.create_image(100, 100, anchor=tk.NW, image=enlarged_image)
    canvas.image = enlarged_image  # 参照を保持
create_gallery()

# インタラクティブなボタンの作成
def create_button_image():
    button_image = ImageTk.PhotoImage(images[0])  # ボタンとして使う画像
    button_id = canvas.create_image(200, 200, anchor=tk.CENTER, image=button_image)
    canvas.tag_bind(button_id, "<Button-1>", on_button_click)
def on_button_click(event):
    print("ボタンがクリックされました！")
create_button_image()