Images in PyCairo

In this part of the PyCairo tutorial, we will talk about images. We will show how to display a PNG and JPEG image on the GTK window. We will also draw some text on an image.

Displaying a PNG image

In the first example, we will display a PNG image.

#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program shows how to draw 
an image on a GTK window in PyCairo.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''

from gi.repository import Gtk
import cairo


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()
        
        self.init_ui()
        self.load_image()
        
        
    def init_ui(self):    

        darea = Gtk.DrawingArea()
        darea.connect("draw", self.on_draw)
        self.add(darea)

        self.set_title("Image")
        self.resize(300, 170)
        self.set_position(Gtk.WindowPosition.CENTER)
        self.connect("delete-event", Gtk.main_quit)
        self.show_all()
        
        
    def load_image(self):
        
        self.ims = cairo.ImageSurface.create_from_png("stmichaelschurch.png")
        
            
    def on_draw(self, wid, cr):

        cr.set_source_surface(self.ims, 10, 10)
        cr.paint()
        
    
def main():
    
    app = Example()
    Gtk.main()
        
        
if __name__ == "__main__":    
    main()

The example displays an image.

self.ims = cairo.ImageSurface.create_from_png("stmichaelschurch.png")

We create an image surface from a PNG image.

cr.set_source_surface(self.ims, 10, 10)

We set a source for painting from the previously created image surface.

cr.paint()

We paint the source on the window.

Figure: Showing an image

Displaying a JPEG image

PyCairo has built-in support only for PNG images. Other images can be displayed via the GdkPixbuf.Pixbuf object. It is a GTK object for manipulating images.

#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program shows how to draw 
an image on a GTK window in PyCairo.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''


from gi.repository import Gtk, Gdk, GdkPixbuf
import cairo


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()
        
        self.init_ui()
        self.load_image()
        
        
    def init_ui(self):    

        darea = Gtk.DrawingArea()
        darea.connect("draw", self.on_draw)
        self.add(darea)

        self.set_title("Image")
        self.resize(300, 170)
        self.set_position(Gtk.WindowPosition.CENTER)
        self.connect("delete-event", Gtk.main_quit)
        self.show_all()
        
        
    def load_image(self):
        
        self.pb = GdkPixbuf.Pixbuf.new_from_file("stmichaelschurch.jpg")
        

    def on_draw(self, wid, cr):

        Gdk.cairo_set_source_pixbuf(cr, self.pb, 5, 5)
        cr.paint()
        
    
def main():
    
    app = Example()
    Gtk.main()
        
        
if __name__ == "__main__":    
    main()

In this example, we display a JPEG image on the window.

from gi.repository import Gtk, Gdk, GdkPixbuf

In addition to Gtk we will also need Gdk and GdkPixbuf modules.

self.pb = GdkPixbuf.Pixbuf.new_from_file("stmichaelschurch.jpg")

We create a GdkPixbuf.Pixbuf from a JPEG file.

Gdk.cairo_set_source_pixbuf(cr, self.pb, 5, 5)
cr.paint()

The Gdk.cairo_set_source_pixbuf() method sets the pixbuf as a source for painting.

Watermark

It is common to draw information on images. The text written on an image is called a watermark. Watermarks are used to identify images. They could be copyright notices or image creation times.

#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program draws a watermark
on an image.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''

from gi.repository import Gtk
import cairo


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()
        
        self.init_ui()
        self.load_image()
        self.draw_mark()
        
        
    def init_ui(self):    

        darea = Gtk.DrawingArea()
        darea.connect("draw", self.on_draw)
        self.add(darea)

        self.set_title("Watermark")
        self.resize(350, 250)
        self.set_position(Gtk.WindowPosition.CENTER)
        self.connect("delete-event", Gtk.main_quit)
        self.show_all()
        
        
    def load_image(self):
        
        self.ims = cairo.ImageSurface.create_from_png("beckov.png")
        
        
    def draw_mark(self):
        
        cr = cairo.Context(self.ims)
        cr.set_font_size(11)
        cr.set_source_rgb(0.9 , 0.9 , 0.9)
        cr.move_to(20 , 30)
        cr.show_text(" Beckov 2012 , (c) Jan Bodnar ")
        cr.stroke()          
        
            
    def on_draw(self, wid, cr):

        cr.set_source_surface(self.ims, 10, 10)
        cr.paint()
        
    
def main():
    
    app = Example()
    Gtk.main()
        
        
if __name__ == "__main__":    
    main()

We draw copyright information on an image.

def load_image(self):
    
    self.ims = cairo.ImageSurface.create_from_png("beckov.png")

In the load_image() method, we create an image surface from a PNG image.

def draw_mark(self):
    
    cr = cairo.Context(self.ims)
...

In the draw_mark() method, we draw the copyright message on the image. First we create a drawing context from the image surface.

cr.set_font_size(11)
cr.set_source_rgb(0.9 , 0.9 , 0.9)
cr.move_to(20 , 30)
cr.show_text(" Beckov 2012 , (c) Jan Bodnar ")
cr.stroke()

Then we draw a small text in white colour.

def on_draw(self, wid, cr):

    cr.set_source_surface(self.ims, 10, 10)
    cr.paint()

Finally, the image surface is drawn on the window.
This chapter covered images in PyCairo.

Manwhocodes

Images in PyCairo