Pillow ImageTK displaying only a part of an image

Question

I have recently made a code to try and be an photo's app, however the image isn't being shown properly. I have an image that I am using for reference, and I am trying to make it show the whole thing on the canvas, however I get the following:

Code:

def open_image():
    global selected_image
    global img
    try:
        selected_image = askopenfile(title="Open Image", filetypes=filetypes).name
        root.title(selected_image + " - Photos")
        img_temp = Image.open(selected_image).resize((960, 540), Image.ANTIALIAS)
        img = ImageTk.PhotoImage(img_temp)
        image_area.create_image(1, 1, anchor="n", image=img)
    except Exception as e:
        print(e)

Image for testing: The original image

The result of the code and the image: The result

If anyone can help then I would be grateful!

James

(People asking for whole code so here it is )

import tkinter
from tkinter.filedialog import *
from PIL import Image, ImageTk

img_exten = r"*.png  *.bmp  *jpeg  *.bmp  *.ico  *.gif  *.jpg"
filetypes = (
    ("Image Files", img_exten),
    ("All Files", "*.*")
)

selected_image = ""
img = ""

root = tkinter.Tk()
root.title("Photos")


def do_nothing():
    print(0)


def open_image():
    global selected_image
    global img
    try:
        selected_image = askopenfile(title="Open Image", filetypes=filetypes).name
        root.title(selected_image + " - Photos")
        img_temp = Image.open(selected_image).resize((960, 540), Image.ANTIALIAS)
        size = 960, 540
        img_temp.thumbnail(size, Image.ANTIALIAS)
        img = ImageTk.PhotoImage(img_temp)
        image_area.create_image(1, 1, image=img)
    except Exception as e:
        print(e)


def close_image():
    global selected_image
    selected_image = ""
    root.title("Photos")

image_area = tkinter.Canvas(root, width=960, height=540)
image_area.grid(column=1, row=1)

# Running the window
tkinter.mainloop()

Have you tried experimenting with different values for the `anchor` parameter? — Bryan Oakley, Jan 15 '22 at 20:18
@BryanOakley I have and it moves around the picture, I can show you some screenshots of this if you want? But on it's own it doesn't do a whole image — devjamesje, Jan 15 '22 at 20:44
What do you mean "on it's own it doesn't do a whole image"? It does indeed affect the whole image. It defines what part of the image appears at the given coordinates. Please provide us with a complete [mcve] — Bryan Oakley, Jan 15 '22 at 20:45
There is no `anchor` option in your *full code*, but in your first posted code. BTW using `anchor='nw'` will solve your issue. — acw1668, Jan 16 '22 at 15:08
We don't need the _whole_ code, we need a _minimal_ but _complete_ example. For example, the menubar seems unrelated to the problem being asked about. — Bryan Oakley, Jan 16 '22 at 18:18
@acw1668 I have tried that and it doesn't display the whole image — devjamesje, Jan 16 '22 at 22:09
Your code doesn't produce any image because `open_image` is never called. — Bryan Oakley, Jan 16 '22 at 22:19

shullaw · Answer 1 · 2022-01-15T23:59:58.000

import os, sys
import Image

size = 128, 128


for infile in sys.argv[1:]:
    outfile = os.path.splitext(infile)[0] + ".thumbnail"
    if infile != outfile:
        try:
            im = Image.open(infile)
            im.thumbnail(size, Image.ANTIALIAS)
            im.save(outfile, "JPEG")
        except IOError:
            print "cannot create thumbnail for '%s'" % infile

Taken from How do I resize an image using PIL and maintain its aspect ratio?

So in your case:

def open_image():
    global selected_image
    global img
    try:
        selected_image = askopenfile(title="Open Image", filetypes=filetypes).name
        root.title(selected_image + " - Photos")
        img_temp = Image.open(selected_image))
        im_temp.thumbnail(960, 540, Image.ANTIALIAS)
        img = ImageTk.PhotoImage(img_temp)
        image_area.create_image(1, 1, anchor="n", image=img)
    except Exception as e:
        print(e)

Update:

import os, sys
from PIL import Image, ImageDraw

size = 128, 128

infile = r'Drive:\\path\\logo.png'
outfile = r'Drive:\\path\\logo2.png'
im = Image.open(infile)
im.thumbnail(size, Image.ANTIALIAS)
im.save(outfile, "PNG")

I've tested and this will resize .png and .jpeg.

Result:

It gets converted to .png when I upload. It is .jpeg.

This answer would be better if you explained what you changed. Otherwise we have to compare your code to the original line-by-line and character-by-character. — Bryan Oakley, Jan 15 '22 at 20:17
@shullaw I tried and the displaying image is still the same. Do you know any other methods? — devjamesje, Jan 15 '22 at 20:40
@BryanOakley I've updated the code. Nothing to compare. Brand new function to resize an image. User can import new image to their liking. — shullaw, Jan 15 '22 at 23:46

score 0 · Answer 2 · answered Jan 15 '22 at 22:50

image_area is not defined within this function. It would be helpful if we could see where that is defined and what it is to see if the problem originates from there.

Also I like to ensure I resize my images to the same aspect ratio by changing

img_temp = Image.open(selected_image).resize((960, 540), Image.ANTIALIAS)

To

img_temp = Image.open(selected_image)
ar = img_temp.width / img_temp.height
height = 540
width = int(height*ar)
img_temp = img_temp.resize((width, height), Image.ANTIALIAS)

It wasn't defined at all. I am new to this module so just been trying to get things to work. I am going to try and add it in now and see the result — devjamesje, Jan 16 '22 at 10:55

Bryan Oakley · Accepted Answer · 2022-01-16T22:31:12.180

Other than the fact that I had to modify your code to get it to produce any image at all, the only problem appears to be that you're not setting the anchor attribute of the image. Therefore, tkinter will place the center of the image at the given coordinates. That means that only the bottom-right quadrant of the image will be displayed.

If you want the upper-left corner of the image to be at the given coordinates, set the anchor to "nw" (eg: "northwest"). When I make the following modification, my window shows the complete resized image.

image_area.create_image(1, 1, image=img, anchor="nw")

Pillow ImageTK displaying only a part of an image

3 Answers3