pythonpython-3.xtkinterimage-conversiontkinter-button

add multiple buttons in tkinter(image converter)


I tried building this all-in-one image converter(basically its just png,jpg,jpeg,webp), it was supposed to let the user select a image and convert it into one of the above given formats(one at a time). But, when i try running it only the getImage() & last func buttons are displayed , the one in the centre are being skipped. output

import tkinter as tk
from tkinter import filedialog
from PIL import Image

root = tk.Tk()

canvas1 = tk.Canvas(root, width = 300, height = 500, bg = 'azure3', relief = 'raised')
canvas1.pack()

label1 = tk.Label(root, text = 'File Conversion Tool', bg = 'azure3')
label1.config(font = ('helvetica', 20))
canvas1.create_window(150, 60, window = label1)


def getImage():
    global im1

    import_file_path = filedialog.askopenfilename()
    im1 = Image.open(import_file_path)


browseButton_Image = tk.Button(text = " Import Image/File ", command = getImage, bg = 'royalblue', fg = 'white',
                             font = ('helvetica', 12, 'bold'))
canvas1.create_window(150, 130, window = browseButton_Image)

def convertToPNG():
    global im1
    export_file_path = filedialog.asksaveasfilename(defaultextension = '.png')
    im1.save(export_file_path)


saveAsButton_PNG = tk.Button(text = 'Convert to PNG', command = convertToPNG, bg = 'royalblue', fg = 'white',
                             font = ('helvetica', 12, 'bold'))
canvas1.create_window(150, 180, window = saveAsButton_PNG)

def convertToJPG():
    global im1
    export_file_path = filedialog.asksaveasfilename(defaultextension = '.jpg')
    im1.save(export_file_path)


saveAsButton_JPG = tk.Button(text = 'Convert to JPG', command = convertToJPG, bg = 'royalblue', fg = 'white',
                             font = ('helvetica', 12, 'bold'))
canvas1.create_window(150, 180, window = saveAsButton_JPG)

def convertToJPEG():
    global im1
    export_file_path = filedialog.asksaveasfilename(defaultextension = '.jpeg')
    im1.save(export_file_path)


saveAsButton_JPEG = tk.Button(text = 'Convert to JPEG', command = convertToJPEG, bg = 'royalblue', fg = 'white',
                             font = ('helvetica', 12, 'bold'))
canvas1.create_window(150, 180, window = saveAsButton_JPEG)

def convertToWebP():
    global im1
    export_file_path = filedialog.asksaveasfilename(defaultextension = '.webp')
    im1.save(export_file_path)


saveAsButton_WebP = tk.Button(text = 'Convert to WebP', command = convertToWebP, bg = 'royalblue', fg = 'white',
                             font = ('helvetica', 12, 'bold'))
canvas1.create_window(150, 180, window = saveAsButton_WebP)

root.mainloop()

Solution

  • Lookong from the code, the last 4 buttons have the same x, y position: 150, 180. As a result, the 4 buttons are getting overlapped. Looking from the first 2 buttons, your button's y position increases by 50. So add 50 to every previous button's y position.

    saveAsButton_PNG = tk.Button(text = 'Convert to PNG', command = convertToPNG, bg = 'royalblue', fg = 'white', font = ('helvetica', 12, 'bold'))
    canvas1.create_window(150, 180, window = saveAsButton_PNG)
    
    ...
    
    saveAsButton_JPG = tk.Button(text = 'Convert to JPG', command = convertToJPG, bg = 'royalblue', fg = 'white', font = ('helvetica', 12, 'bold'))
    canvas1.create_window(150, 230, window = saveAsButton_JPG)
    
    ...
    
    saveAsButton_JPEG = tk.Button(text = 'Convert to JPEG', command = convertToJPEG, bg = 'royalblue', fg = 'white', font = ('helvetica', 12, 'bold'))
    canvas1.create_window(150, 280, window = saveAsButton_JPEG)
    
    ...
    
    saveAsButton_WebP = tk.Button(text = 'Convert to WebP', command = convertToWebP, bg = 'royalblue', fg = 'white',font = ('helvetica', 12, 'bold'))
    canvas1.create_window(150, 330, window = saveAsButton_WebP)
    
    ...
    
    root.mainloop()