I'm trying to open image files and display them in python 3.8 using Tkinter and Pillow, but something is scaling the images wrong on my screen.
import tkinter as tk
from PIL import Image, ImageTk
class ViewingWindow(tk.Frame):
def __init__(self, parent):
tk.Frame.__init__(self, parent)
self.image = None
self.canvas = tk.Canvas(self, width=500, height=500)
self.canvas.pack()
def setImage(self, img):
self.image = img
print(img.width())
print(img.height())
print(self.canvas["width"])
print(self.canvas["height"])
self.canvas.create_image(0, 0, anchor=tk.NW, image=img)
window = tk.Tk()
canvas = ViewingWindow(window)
canvas.pack()
img = Image.open("500x500.jpg")
img = ImageTk.PhotoImage(img)
canvas.setImage(img)
window.mainloop()
This is the result, shown for reference is Windows image viewer at "show actual size", and Gimp at scaling=100%:
The 4 print statements all show "500", every part of the system seems to agree that the image is shown at 500x500, except the actual pixels on the screen. For whatever reason it's scaled to something close to 750x750, what in the world is scaling my image? This is consistent for all images I've tried to open in Tkinter, and regardless on window size and widget sizes.
Tested on Windows 10 with screen resolution 1920x1080.
it's scaled to something close to 750x750
750/500 = 150%.It seems that your system zoom ratio is 150%.
To show the right image size.Just like furas said,you need to use DPI awareness.Read the problem in MSDN official doc
About DPI awareness.
To solve the problem,you can set the DPI awareness in your code.(Or you can change the zoom ratio to 100%)
In my PC,the are not the same size without DPI awareness.Now after set the DPI awareness:
Add this in your code:
import ctypes
ctypes.windll.shcore.SetProcessDpiAwareness(2) # this could only be used when your version of windows >= 8.1
Related
I added a png image with transparent regions (alpha=0) to a tkinter canvas (see minimal example below). A mouse-click is recognized when clicking somewhere in the rectangle that contains the tkinter image.
How do I adjust the functionality such that any mouse binding (clicking, moving, etc.) is only called when the mouse is located on pixels with non-zero alpha values of the image?
Tux (linux mascot) example image :
try:
# Tkinter for Python 2.xx
import Tkinter as tk
except ImportError:
# Tkinter for Python 3.xx
import tkinter as tk
image_path = "./tux.png"
class Application(tk.Frame):
def __init__(self, master):
self.master = master
tk.Frame.__init__(self, master)
self.canvas = tk.Canvas(self, width=600, height=600)
self.canvas.pack(fill="both", expand=True)
# create an example image
self.tk_image = tk.PhotoImage(file=image_path)
self.image_obj= self.canvas.create_image(200, 200, anchor = 'center',
image=self.tk_image)
self.canvas.tag_bind(self.image_obj, '<Button-1>', self.clicked)
def clicked(self, event):
print("I am tux.")
def main():
app_win = tk.Tk()
app = Application(app_win).pack(fill='both', expand=True)
app_win.mainloop()
if __name__ == '__main__':
main()
How do I adjust the functionality such that any mouse binding (clicking, moving, etc.) is only called when the mouse is located on pixels with non-zero alpha values of the image?
You can't. That's simply not something that tkinter directly supports. Unfortunately, tkinter's support of transparency is a bit lacking.
What you might be able to do, however, is have the bound function get the image object, compute which pixel was clicked on, and then query the image instance to get the color of that pixel.
So I have 2 images, 1 image is supposed to be the background and the other 1 is just an image of a character.
I am able to put one image over the other but the image has white borders even though it's a PNG file.
This is how it looks like:
This is how I want it to look like:
Here are the two separte images:
https://imgur.com/a/SmE5lgC
Sorry that I didnt post the images directly but I can not since I do no have 10 reputation points.
I've tried converting it to RGBA but same thing happened.
from tkinter import *
from PIL import Image
root = Tk()
root.title("Game")
background = PhotoImage(file="back.png")
backgroundlabel = Label(root, image=background)
backgroundlabel.pack()
character = PhotoImage(file="hero.png")
characterlabel = Label(root, image=character)
characterlabel.place(x=0,y=0)
root.mainloop()
You just need to use the canvas widget in Tkinter. Only the canvas widget supports transparency. This has to do with how Tkinter draws the display. As of right now, your code is just overlaying two images. Tkinter does not know how to compose them with transparency unless you use the canvas widget.
See the following code:
from tkinter import *
from PIL import Image
root = Tk()
root.title("Game")
frame = Frame(root)
frame.pack()
canvas = Canvas(frame, bg="black", width=700, height=400)
canvas.pack()
background = PhotoImage(file="background.png")
canvas.create_image(350,200,image=background)
character = PhotoImage(file="hero.png")
canvas.create_image(30,30,image=character)
root.mainloop()
All I did was download the images you provided. I did not modify the images. So, the bottom line is that you just need to use the canvas widget.
Voilà!
Note: The question asked is a duplicate of How do I make Tkinter support PNG transparency?
I found this code:
from PIL import Image, ImageTk
import tkinter as tk
root = tk.Tk()
img = Image.open(r"Sample.jpg")
canvas = tk.Canvas(root, width=500, height=500)
canvas.pack()
tk_img = ImageTk.PhotoImage(img)
canvas.create_image(250, 250, image=tk_img)
root.mainloop()
It displays any picture in 500x500px resolution. I tried to change it and display it in its original size:
from PIL import Image, ImageTk
import tkinter as tk
root = tk.Tk()
img = Image.open(r"D:/1.jpg")
canvas = tk.Canvas(root, width=img.width, height=img.height)
canvas.pack()
tk_img = ImageTk.PhotoImage(img)
canvas.create_image(img.width/2, img.height/2, image=tk_img)
root.mainloop()
But something went wrong and the picture with a size of 604x604px shows in a window with a size of 602x602px, but the window size is correct.
Take a look (full image).
What am I doing wrong?
P.S. Sorry for bad English.
Well, no, your first example still cuts off by a few pixels. All top level windows will have padding around their absolute borders to prevent other elements from 'bleeding' into the borders and looking unprofessional.
You are still being given a canvas of 604 pixels by 604 pixels, but the root window itself is asserting its padding. I could not find any way of removing this top level padding, and it may very well appear differently in other operating systems. A work-around could be to request a canvas size that is slightly larger than the image you would like to display.
Another issue, if you're aiming for precision, would be the line...
canvas.create_image(img.width/2, img.height/2, image=tk_img)
Which could create off-by-one errors if your width or height is an odd number. You can anchor images to the north-west corner and place them at the co-ordinates (0, 0) like such:
canvas.create_image(0, 0, anchor=tk.NW, image=tk_img)
Is there any way to import an image into python using PIL and set it as the background for a ttk mainframe that spans the entirety of a Tkinter root window? As of now I have only seen ways to do this is a Tkinter root. Also is there any way to make ttk self adjust the size of the image so that even if it's small it covers the entire screen?
So to sum up I want an image to cover the entire ttk mainframe box without messing with me putting anything else in the ttk frame.
for example
if the pic covered the entire window, a command,
ttk.Button(root, text="Hello").grid(column=0, row=0, sticky=(N,S,W,E))
would still insert a button in the mainframe. Thanks :)
You can't set an image background to a ttk frame, they don't accept image options. So you could make a ttk frame and put a label or something inside it and then have it span the frame adapting the below example.
Here's a small example demonstrating what you want. We load an image with pil, notice the image linked will be smaller (I hope) than your screensize.
So, we set the geometry of the root window to be the entire screen the image is less than this so we resize it to cover the entire width. You can override the max and min height and then set it according to this. Just a sample value. We then place the bg label and grid widgets on top of it. The label has a lower stacking order than the other widgets you will place with grid so they appear on top. Alternatively you could use a canvas, or another widget. With a canvas you'll have to use create_window to place widgets in the canvas.
import tkinter as tk
from tkinter import ttk
from PIL import Image, ImageTk
root = tk.Tk()
width, height = root.winfo_screenwidth(), root.winfo_screenheight()
#print(root.winfo_screenheight(), root.winfo_screenwidth())
root.geometry("%dx%d" % (width, height))
#URL FOR BACKGROUND
#https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=0ahUKEwiVroCiyZHMAhXKeT4KHQHpDVAQjBwIBA&url=http%3A%2F%2Fwallpaperswide.com%2Fdownload%2Fblack_background_metal_hole_very_small-wallpaper-800x480.jpg&psig=AFQjCNEjZ7GDbjG9sFie-yXW3fP85_p0VQ&ust=1460840934258935
image = Image.open("background.jpg")
if image.size != (width, height):
image = image.resize((width, height), Image.ANTIALIAS)
#print("DONE RESIZING")
# image.save("background.jpg")
#print(image.size)
image = ImageTk.PhotoImage(image)
bg_label = tk.Label(root, image = image)
bg_label.place(x=0, y=0, relwidth=1, relheight=1)
bg_label.image = image
your_button = ttk.Button(root, text='This is a button')
your_button.grid()
root.mainloop()
I put in a partially transparent PNG image in Tkinter and all I get is this
How do I make the dark triangle on the right clear? (like it's supposed to be)
This is python 2.6 on Windows 7, btw.
Here's an example (the PNG file example.png has lots of transparency in different places):
from Tkinter import Tk, Frame, Canvas
import ImageTk
t = Tk()
t.title("Transparency")
frame = Frame(t)
frame.pack()
canvas = Canvas(frame, bg="black", width=500, height=500)
canvas.pack()
photoimage = ImageTk.PhotoImage(file="example.png")
canvas.create_image(150, 150, image=photoimage)
t.mainloop()
You need to make sure the image has been stored as "RGBA" which is RGB with an alpha channel. You can check for that using a graphics program of your choice, or using PIL (Python Imaging Library):
import Image
im = Image.open("button.png")
print im.mode
This should print "RGBA". If not, you'll have to make sure the alpha channel is saved with the image. You'll have to consult your graphics program manual for how to do that.