Python3 Tkinter 画像の拡大縮小について

Question

画像の拡大縮小を行いたいです。

調べたところ canvas.scale というのを使えば実現できそうなのですが、実際に画像に反映されません。

自分的にはcanvas.scaleに設定するIDが間違っていると思うのですが、実際のところ何が間違っているのでしょうか？

回答よろしくお願いします。

該当ソース

from decimal import Decimal
import tkinter as tk

class App:
    def __init__(self, win):
        self.win = win
        self.win.geometry("500x500")
        self.img_disp_flag = False

    def view_create(self):
        self.win.rowconfigure(0, weight=1)
        self.win.columnconfigure(0, weight=1)

        self.frame_viewer = tk.Frame(win)
        self.frame_viewer.grid(row=0, column=0, sticky="nsew")
        self.frame_button = tk.Frame(win)
        self.frame_button.grid(row=1, column=0, sticky="nsew")

        self.frame_viewer.rowconfigure(0, weight=1)
        self.frame_viewer.columnconfigure(0, weight=1)

        self.canvas = tk.Canvas(self.frame_viewer)
        self.canvas.grid(row=0, column=0, sticky="nsew")

        self.ysb = tk.Scrollbar(self.frame_viewer, width=20, orient="vertical", command=self.canvas.yview)
        self.canvas.configure(yscrollcommand=self.ysb.set)
        self.ysb.grid(row=0, column=1, sticky="ns")

        self.xsb = tk.Scrollbar(self.frame_viewer, width=20, orient="horizontal", command=self.canvas.xview)
        self.canvas.configure(xscrollcommand=self.xsb.set)
        self.xsb.grid(row=1, column=0, sticky="ew")

        self.scale_up_button = tk.Button(self.frame_button, text="＋", width=2)
        self.scale_up_button.grid(row=0, column=0, padx=5, pady=5)

        self.scale_down_button = tk.Button(self.frame_button, text="－", width=2)
        self.scale_down_button.grid(row=0, column=1, padx=5, pady=5)

        self.scale_default_button = tk.Button(self.frame_button, text="±0", width=2)
        self.scale_default_button.grid(row=0, column=2, padx=5, pady=5)

        self.img_disp_button = tk.Button(self.frame_button, text="img_disp")
        self.img_disp_button.grid(row=0, column=3, padx=5, pady=5)

        self.img_hide_button = tk.Button(self.frame_button, text="img_hide")
        self.img_hide_button.grid(row=0, column=4, padx=5, pady=5)

        self.scale = Decimal("1.0")
        self.canvas.scale("all", 0, 0, self.scale, self.scale)

    # バインド
    def bind_event(self):
        self.canvas.bind("<MouseWheel>", lambda e:self.wheel_rotated(e, app))
        self.scale_up_button.bind("<ButtonRelease>", lambda e:self.zoom_up(e, app))
        self.scale_down_button.bind("<ButtonRelease>", lambda e:self.zoom_down(e, app))
        self.scale_default_button.bind("<ButtonRelease>", lambda e:self.zoom_default(e, app))
        self.img_disp_button.bind("<ButtonRelease>", lambda e:self.img_disp(e, app))
        self.img_hide_button.bind("<ButtonRelease>", lambda e:self.img_hide(e, app))

    # 画像上でマウスホイールを動かしたとき
    def wheel_rotated(self, e, app):
        # 垂直スクロールバーのみマウスホイールに対応（水平には対応できないか･･･）
        # https://stackoverflow.com/questions/17355902/python-tkinter-binding-mousewheel-to-scrollbar
        self.canvas.yview_scroll(int(-1*(e.delta/120)), "units")

    # 画像の拡大
    def zoom_up(self, e, app):
        self.scale += Decimal("0.1")
        self.canvas.scale("current", 0, 0, self.scale, self.scale)
        print(self.scale)

    # 画像の縮小
    def zoom_down(self, e, app):
        self.scale -= Decimal("0.1")
        self.canvas.scale("current", 0, 0, self.scale, self.scale)
        print(self.scale)

    # 倍率をデフォルトに戻す
    def zoom_default(self, e, app):
        self.scale = Decimal("1.0")
        self.canvas.scale("current", 0, 0, self.scale, self.scale)
        print(self.scale)

    """
        canvas.scale(ID, x0, y0, rx, ry)
            ID  オブジェクトのID
            x0  基準となるx座標
            y0  基準となるy座標
            rx  x座標の拡大率
            ry  y座標の拡大率
    """

    # 画像の表示
    def img_disp(self, e, app):
        if self.img_disp_flag == False:
            self.imgfile = "c:\Users\ユーザ名\Desktop\scale_test\test.png"
            self.img = tk.PhotoImage(file=self.imgfile)
            self.disp_image = self.canvas.create_image(0, 0, image=self.img, anchor=tk.NW)
            self.canvas.config(scrollregion=app.canvas.bbox("all"))
            self.img_disp_flag = True
        else:
            print("Already image displayed!")

    # 画像の非表示
    def img_hide(self, e, app):
        if self.img_disp_flag == True:
            self.canvas.delete(self.disp_image)
            self.img_disp_flag = False
        else:
            print("Already image hidden!")


if __name__ == "__main__":
    win = tk.Tk()
    app = App(win)
    app.view_create()
    app.bind_event()
    win.mainloop()

追記（subsample()による縮小、scaleが0以下だと拡大が意図した動作とは違う動作になる）

    def zoom_up(self, e, app):
        if self.img_disp_flag == True:
            self.canvas.delete(self.disp_image)
            self.scale -= 1
            self.img_zoom_up = self.img.subsample(self.scale, self.scale)
            #self.img_zoom_up = self.img.zoom(x=self.scale, y=self.scale)
            self.disp_image = self.canvas.create_image(0, 0, image=self.img_zoom_up, anchor=tk.NW)
            self.img_x_zoom_up = self.img_zoom_up.width()
            self.img_y_zoom_up = self.img_zoom_up.height()
            print("size:", self.img_x_zoom_up, self.img_y_zoom_up)
            print("scale:", self.scale)
        else:
            print("Not displaying an image yet!")


    def zoom_down(self, e, app):
        if self.img_disp_flag == True:
            self.canvas.delete(self.disp_image)
            self.scale += 1
            self.img_zoom_down = self.img.subsample(self.scale, self.scale)
            self.disp_image = self.canvas.create_image(0, 0, image=self.img_zoom_down, anchor=tk.NW)
            self.img_x_zoom_down = self.img_zoom_down.width()
            self.img_y_zoom_down = self.img_zoom_down.height()
            print("size:", self.img_x_zoom_down, self.img_y_zoom_down)
            print("scale:", self.scale)
        else:
            print("Not displaying an image yet!")
            

    def zoom_default(self, e, app):
        if self.img_disp_flag == True:
            self.canvas.delete(self.disp_image)
            self.scale = 1
            self.img_zoom_default = self.img.subsample(self.scale, self.scale)
            self.disp_image = self.canvas.create_image(0, 0, image=self.img_zoom_default, anchor=tk.NW)
            print("size:", self.img_x, self.img_y)
            print("scale:", self.scale)
        else:
            print("Not displaying an image yet!")

Answer 1

PIL(Pillow)を使った拡大縮小のサンプルです。

zoom/subsample では決まった倍率にしか変更できなかったので、
用途に合わなかったかもしれません。整数値しか指定できませんでした。

表示位置は左上に固定してますが、create_image では
指定した座標が画像の中心に来るようになってるので、
必要に応じて、適宜調整してください。

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


class PILImage:
    def __init__(self, filepath, canvas, pos):
        self.pos = pos
        self.filepath = filepath
        self.canvas = canvas
        self.src_image = Image.open(filepath)
        self.image = None
        self.imageId = None
        self.scale = 1.0
        self.update()

    def update(self):
        from math import floor

        # ローカル変数宣言 (self.が大量にあり読みにくい場合)
        imageId = self.imageId
        src_image = self.src_image
        canvas = self.canvas
        scale = self.scale
        x, y = self.pos
        w, h = self.src_image.size

        # 以前の画像を消去
        if imageId:
            canvas.delete(imageId)

        # スケール変更後のサイズを計算
        w2, h2 = floor(w*scale), floor(h*scale)

        # リサイズ
        img = src_image.resize((w2, h2))

        # 表示位置調整(中心 → 左上の座標)
        x2, y2 = x+w2//2, y+h2//2

        # 描画更新
        self.image = image = ImageTk.PhotoImage(img)
        self.imageId = canvas.create_image(x2, y2, image=image)

    def setScale(self, scale):
        self.scale = scale
        self.update()


def main():
    root = tk.Tk()
    root.title("PIL resize demo")
    root.geometry("600x600+100+100")

    frame = ttk.Frame(root)
    frame.pack(fill=tk.BOTH, expand=1)
    
    canvas = tk.Canvas(frame)
    canvas.pack(fill=tk.BOTH, expand=1)

    image = PILImage("test.png", canvas, pos=(0, 0))

    scale = 1.0
    def zoomIn():
        nonlocal scale
        scale += 0.1
        image.setScale(scale)

    def zoomOut():
        nonlocal scale
        scale -= 0.1
        image.setScale(scale)

    ttk.Button(frame, text="+", command=zoomIn).pack(fill=tk.BOTH, expand=0)
    ttk.Button(frame, text="-", command=zoomOut).pack(fill=tk.BOTH, expand=0)


    root.mainloop()

if __name__ == '__main__':
    main()

Answer 2

IDを修正するなら、self.img_disp もしくは "all"ですが、
テキストのフォントサイズやラスター画像の中身には影響しないので、
scaleでは、期待する動作にはならないです。

PhotoImage の zeem(), subsample() 辺りを使っての画像のリサイズが必要です。

画面全体の表示位置等の割合を保ったまま拡大縮小を行う場合に、
画像のリサイズと合わせてスケールも呼び出します。

Comments

[person]

質問に追記しましたが、subsample()で縮小はできました、
しかし、scaleが0以下のときはsubsample()での拡大が意図した動作になりません。（画像が垂直方向に反転し、小さくなっていきます。）

一応zoom()を試したところ拡大できましたが、subsample()と比べscaleの増減が反対になってしまいます。
（subsample()はscaleを大きくすると縮小、zoom()はscaleを大きくすると拡大）

そうなるとscaleの増減にif文などを付けないと意図した動作になりませんが、他に簡単な方法はありますか？

[teamikl]

追記したところ以外に変更点はありますか？
画像のパスと、追記分を反映させて実行してみたところ、
こちらでは +- を押したときに
TclError: expected interger but got "0.0" となり、確認できません。

>scaleが0以下

値の単位齟齬がありそうです。例えば subsample に 2 を指定すると
2ピクセル毎の画素から1ピクセル取り出したイメージを返すので、1/2
割合に換算すると 50%です。zoomはその逆。

ドキュメントより
- zoom の取る値は0より大きい値
- subsample は負の値を指定した時には反転します
Negative values will cause the image to be flipped about the Y or X axes
https://www.tcl.tk/man/tcl8.4/TkCmd/photo.htm#M22

他の方法、PIL(Pillow)で resize でしょうか。
扱える画像フォーマットが増える他、
拡大縮小のアルゴリズムも選べるので画質向上も期待できます。

[person]

追記したところ以外の変更点
view_create()内の

self.scale = Decimal("1.0")
self.canvas.scale("all", 0, 0, self.scale, self.scale)

を削除しました。