PxExl-5. SỬ DỤNG PYTHON TKINTER TẠO GIAO DIỆN PHẦN MỀM (P5: THÊM HÌNH ẢNH)

I. Thêm hình ảnh vào Nút (Add Image on a Tkinter Button)

Cú pháp thêm hình ảnh vào nút Tkinter:

Button(master, text = “Button”, image = “image.png”, compound=LEFT)
compound = LEFT -> image will be at left side of the button
compound = RIGHT -> image will be at right side of button
compound = TOP -> image will be at top of button
compound = BOTTOM -> image will be at bottom of button

Bạn sử dụng module Pillow bằng cách:
1. Bấm Window + R để mở cửa sổ Run
2. Gõ cmd
3. Gõ ” pip install pillow “

Sau khi máy tính cài đặt module PIL (pillow) xong, chúng ta sẽ import module này vào để sử dụng như ví dụ dưới đây. Các bạn sử dụng đoạn code sau:
img_import = (Image.open(‘đường dẫn tới file ảnh))
img = ImageTk.PhotoImage(img_import)
Lưu ý:
img_import và img là 2 tên biến, bạn có thể đặt khác đi.

Ví dụ 1:

from tkinter import * #Import tkinter
from tkinter.ttk import * #Import ttk
from PIL import ImageTk, Image #Import ImageTk, Image
# creating tkinter window
root = Tk()
# Adding widgets to the root window
Label(root, text = ‘Learning Python’, 
      font =(‘Verdana’, 15)).pack(side = TOP, pady = 10)
# Creating a photoimage object to use image
img_import =(Image.open(r’C:\Users\Admin\Desktop\Test\flower.png’
))
img = ImageTk.PhotoImage(img_import)
# here, image option is used to
# set image on button
Button(root, text = ‘Click Me !’, image = img).pack(side = TOP)
mainloop()

Kết quả trả ra như hình

Trong đoạn code, chúng ta đã cài đặt nút Click Me!, tuy nhiên do ảnh quá lớn nên đã đè lên nút này. Phần tiếp theo chúng tôi sẽ hướng dẫn các bạn cách chỉnh lại kích cỡ ảnh

II. Điều chỉnh kích thước ảnh khi Add ảnh vào Nút

Chúng ta sẽ điều chỉnh lại 2 đoạn code:

img_import = (Image.open(r’C:\Users\Admin\Desktop\Test\flower.png’)) #Import image từ đường dẫn trực tiếp
resize_image = img_import.resize((60,60), Image.ANTIALIAS) #Resize hình ảnh, sử dụng thuộc tính ANTIALIAS để chuyển hình từ độ phân giải cao về thấp
new_img = ImageTk.PhotoImage(resize_image) #Chuyển ảnh đã qua chỉnh sửa vào hàm PhotoImage

Đoạn code cuối:
Button(root, text = ‘Click Me !’, image = new_img, compound=LEFT).pack(side = TOP) #Thêm thuộc tính compound để đẩy hình ảnh sang bên trái

Toàn bộ đoạn code sẽ như sau:

III. Kết Luận

Như vậy, chúng tôi đã tiếp tục giới thiệu tới các bạn các khái niệm cơ bản của Tkinter trong Python. Nếu có vấn đề nào chưa rõ, các bạn hãy liên hệ với chúng tôi để được giúp đỡ.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *