范例 - 打开并显示图片

这篇教学会运用“点击按钮打开文件”以及“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()

意见反馈