Tkinter to put a GIF Image on a Canvas (Python)

vegaseat 1 Tallied Votes 22K Views Share

The Tkinter module comes with the normal Python installation. It allows you to create Python GUI programs for Windows, Linux or Unix on the Mac. In this snippet we put a GIF image (.gif) onto a form's canvas with just a few lines of code. Most of the lines are remarks to explain what is going on.

# Putting a gif image on a canvas with Tkinter
# tested with Python24 by  vegaseat  25jun2005

from Tkinter import *

# create the canvas, size in pixels
canvas = Canvas(width = 300, height = 200, bg = 'yellow')

# pack the canvas into a frame/form
canvas.pack(expand = YES, fill = BOTH)

# load the .gif image file
# put in your own gif file here, may need to add full path
# like 'C:/WINDOWS/Help/Tours/WindowsMediaPlayer/Img/mplogo.gif'
gif1 = PhotoImage(file = 'DrBunsen.gif')

# put gif image on canvas
# pic's upper left corner (NW) on the canvas is at x=50 y=10
canvas.create_image(50, 10, image = gif1, anchor = NW)

# run it ...
mainloop()
vegaseat 1,735 DaniWeb's Hypocrite Team Colleague

In case anybody wonders, the Tk root window, the one with the Tk symbol in the corner, is created by default.

Shannon_3 0 Newbie Poster

What if you wanted to get an image from a webpage?

vegaseat 1,735 DaniWeb's Hypocrite Team Colleague

To get a GIF picture from the Internet ...

''' Tk_Canvas_Image_url.py
display an image obtained from an internet web page in Tkinter
tested with Python27 and Python34  by  vagaseat   21nov2012
'''

import io
import base64
try:
    # Python2
    import Tkinter as tk
    from urllib2 import urlopen
except ImportError:
    # Python3
    import tkinter as tk
    from urllib.request import urlopen


root = tk.Tk()
root.title("display a website image")
# a little more than width and height of image
w = 520
h = 320
x = 80
y = 100
# use width x height + x_offset + y_offset (no spaces!)
root.geometry("%dx%d+%d+%d" % (w, h, x, y))

# this GIF picture previously downloaded to tinypic.com
image_url = "http://i46.tinypic.com/r9oh0j.gif"

image_byt = urlopen(image_url).read()
image_b64 = base64.encodestring(image_byt)
photo = tk.PhotoImage(data=image_b64)

# create a white canvas
cv = tk.Canvas(bg='white')
cv.pack(side='top', fill='both', expand='yes')

# put the image on the canvas with
# create_image(xpos, ypos, image, anchor)
cv.create_image(10, 10, image=photo, anchor='nw')

root.mainloop()
urireo561 0 Newbie Poster

how do you resize the image or do some editing ?

Gribouillis 1,391 Programming Explorer Team Colleague

@urireo561 You can use pythonmagick or another imagemagick python binding to resize the image. See this snippet for example https://www.daniweb.com/programming/software-development/code/463880/resize-an-image-with-pythonmagick

Ash_4 0 Newbie Poster

I'm using this code snippet and i'm trying to get the background to display, but all I get is the grey window. All of my widgets display correctly though. Their code for the widghets is below the canvas code.

 bg_Image = tk.PhotoImage(file = 'Earth.gif')
        canvas = tk.Canvas(master, width = 500, height = 500, bg = '#d3d3d3')
        canvas.pack()
        canvas.create_image(50, 10, image=bg_Image, anchor='nw')

I dont get any error in the shell and the rest of the code runs correctly. These 4 lines just seem to not like me

yas_549 0 Newbie Poster

I did the same thing it said but my image doesnt fits corectly in the canvas or its not completely in canvas. what should I do to fix it?

CodeWorked 0 Newbie Poster

try https://youtu.be/Zb5cc7VRtW8 , may be relevant and helpful for you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.