點擊按鈕開啟圖片，透過 Canvas 顯示圖片

這篇教學會運用「點擊按鈕開啟檔案」以及「Canvas 畫布」文章，實際製作點擊按鈕後可以選擇圖片檔案，並在開啟圖片後，透過 Canvas 顯示開啟的圖片。

參考：點擊按鈕開啟檔案、Canvas 畫布

因為 Google Colab 不支援 tkinter，所以請使用本機環境 ( 參考：使用 Python 虛擬環境 ) 或使用 Anaconda Jupyter 進行實作 ( 參考：使用 Anaconda )。

介面配置

因為開啟的檔案可能會超過視窗大小，因此參考「Canvas 加入 Scrollbar 滾動條」，使用固定大小的 Frame 裝載 Canvas，並在該 Frame 上方加入一顆按鈕，點擊按鈕時會執行開啟檔案的動作 ( 範例先印出 open image 文字 )。

import os
os.chdir('/')  # Colab 換路徑使用

import tkinter as tk
from tkinter import Variable, filedialog
from PIL import Image, ImageTk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x360')

# 點擊按鈕要執行的函式
def show():
    print('open image')

button = tk.Button(root, text='開啟圖片', command=show)  # 按鈕
button.pack()

frame = tk.Frame(root, width=300, height=300)  # 放 Canvas 的 Frame
frame.pack()

canvas = tk.Canvas(frame, width=300, height=300, bg='#fff')  # Canvas

scrollX = tk.Scrollbar(frame, orient='horizontal')    # 水平捲軸
scrollX.pack(side='bottom', fill='x')
scrollX.config(command=canvas.xview)

scrollY = tk.Scrollbar(frame, orient='vertical')      # 垂直捲軸
scrollY.pack(side='right', fill='y')
scrollY.config(command=canvas.yview)

canvas.config(xscrollcommand=scrollX.set, yscrollcommand=scrollY.set)   # Canvas 綁定捲軸
canvas.pack(side='left')

root.mainloop()

加入開啟圖片程式

修改 show() 函式內容，使用 filedialog.askopenfilename 開啟檔案，設定 filetypes 參數指定開啟 png、jpg 或 git 檔案 ( 檔案以 tuple 格式呈現，第一個項目為類型名稱，第二個項目為類型 )，開啟後根據圖片的長寬，將 Canvas 的 scrollregion 設定為圖片的長寬，並藉由 Canvas 的屬性搭配 delete('all') 方法，更新 Canvas 內容。

import os
os.chdir('/')  # Colab 換路徑使用

import tkinter as tk
from tkinter import Variable, filedialog
from PIL import Image, ImageTk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x360')

def show():
    img_path = filedialog.askopenfilename(filetypes=[('png', '*.png'),('jpg', '*.jpg'),('gif', '*.gif')])  # 指定開啟檔案格式
    img = Image.open(img_path)           # 取得圖片路徑
    w, h = img.size                      # 取得圖片長寬
    tk_img = ImageTk.PhotoImage(img)     # 轉換成 tk 圖片物件
    canvas.delete('all')                 # 清空 Canvas 原本內容
    canvas.config(scrollregion=(0,0,w,h))   # 改變捲動區域
    canvas.create_image(0, 0, anchor='nw', image=tk_img)   # 建立圖片
    canvas.tk_img = tk_img               # 修改屬性更新畫面

button = tk.Button(root, text='開啟圖片', command=show)
button.pack()

frame = tk.Frame(root, width=300, height=300)
frame.pack()

canvas = tk.Canvas(frame, width=300, height=300, bg='#fff')

scrollX = tk.Scrollbar(frame, orient='horizontal')
scrollX.pack(side='bottom', fill='x')
scrollX.config(command=canvas.xview)

scrollY = tk.Scrollbar(frame, orient='vertical')
scrollY.pack(side='right', fill='y')
scrollY.config(command=canvas.yview)

canvas.config(xscrollcommand=scrollX.set, yscrollcommand=scrollY.set)
canvas.pack(side='left')

root.mainloop()

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～