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, chúng tôi đã tiếp tục giới thiệu tới các bạn các khái niệm cơ bản của Tkinter trong Python. Nếu có vấn đề nào chưa rõ, các bạn hãy liên hệ với chúng tôi để được giúp đỡ.

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

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

III. Kết Luận

Trả lời Hủy

Table of Contents