Diff for "WorkingWithImages"

• Images and bitmaps in wxPython are normally created by loading files from disk. Working with the images in memory is, however, a common task for certain types of application. This recipe set looks at the in-memory manipulation (and particularly the generation) of images for use in wxPython applications.

Table of Contents: TableOfContents

Formats and Conversions

The Image classes I find myself working with most frequently are wxImage, wxBitmap, and PIL Image. Here are functions I use to convert between them, in all combinations. I like to have these broken out as six individual functions with related names because the usage and naming in the wxWindows API can be confusing. The API also changes relatively frequently. I believe that the older text in this section is outdated, but I haven't had time to go through it. -- RobbShecter

   1 # Tested with wxPython 2.3.4.2 and PIL 1.1.3.
   2 from wxPython import wx
   3 import Image             # Only if you need and use the PIL library.
   4 
   5 def bitmapToPil(bitmap):
   6     return imageToPil(bitmapToImage(bitmap))
   7 
   8 def bitmapToImage(bitmap):
   9     return wx.wxImageFromBitmap(bitmap)
  10 
  11 
  12 def pilToBitmap(pil):
  13     return imageToBitmap(pilToImage(pil))
  14 
  15 def pilToImage(pil):
  16     image = wx.wxEmptyImage(pil.size[0], pil.size[1])
  17     image.SetData(pil.convert('RGB').tostring())
  18     return image
  19 
  20 
  21 def imageToPil(image):
  22     pil = Image.new('RGB', (image.GetWidth(), image.GetHeight()))
  23     pil.fromstring(image.GetData())
  24     return pil
  25 
  26 def imageToBitmap(image):
  27     return image.ConvertToBitmap()
  28     

• Conversions among wxImage, wxBitmap, wxCursor, wxIcon and DATA

  • wxImage to wxBitmap --  myWxImage.ConvertToBitmap() or wxBitmapFromImage(myWxImage) 

    wxImage to DATA --  myWxImage.GetData()  returning a string in width * height * 3 format

    DATA to wxImage --  image = wxImage(); image.SetData( data )  where data is a Python string of length width * height * 3. DATA to wxBitmap -- Go through wxImage to get to wxBitmap. DATA to wxIcon -- Should be possible, but I don't see an overloaded-constructor name for it.

    wxIcon to wxBitmap --  bitmap = wxEmptyBitmap( icon.GetWidth(), icon.GetHeight()); bitmap.CopyFromIcon( icon ) 

  There seem to be some missing functions, not sure if these are available at a lower level of abstraction for the C peoples, but anyway, here's what hopefully will show up some day:
  • wxBitmap to DATA or wxImage -- Probably the most critical missing item, currently you have to use "save to file" then load the bitmap back from disk using a wxImage. DATA or wxImage to wxCursor -- Should be an overridden constructor available, not yet. wxIcon to DATA or wxImage -- To allow for editing of icons, this would be required. wxCursor to DATA or wxImage -- Again, to allow for editing cursors. Would also need methods to get the current hot spot. wxImage to wxIcon -- See DATA to wxIcon above, either one would be fine, but would be nice to have the complete set.

PIL (Python Imaging Library)

• PIL can be used with wxPython if image processing services are required beyond loading the formats built into wxPython. DATA formatted strings can be created from PIL Image objects using the .convert and .tostring methods (as show in the example below). Note the use of the size attribute of the PIL Image to create the empty wxImage object.

        def GetBitmap( self ):
                import Image
                source = Image.open( r"Z:\mcfport\portfoli\full\claire.jpg", 'r')
                image = apply( wxEmptyImage, source.size )
                image.SetData( source.convert( "RGB").tostring() )
                return image.ConvertToBitmap() # wxBitmapFromImage(image)

Numeric Python

• This example shows the creation of a bitmap using a Numeric Python array as the data source. Note that Numeric uses reversed column-row ordering compared to wxPython, so you'll need to make sure that you generate images using height, width, not width, height coordinates. Also note the use of the 'c' data type for image data in rgb format.

        def GetBitmap( self, width=32, height=32, colour = (0,0,0) ):
                array = Numeric.zeros( (height, width, 3),'c')
                array[:,:,] = colour
                image = wxEmptyImage(width,height)
                image.SetData( array.tostring())
                return image.ConvertToBitmap()# wxBitmapFromImage(image)

Slicing

• Numeric's slicing notation, for our purposes, works as follows:

   [ rowStart: rowEnd, columnStart: columnEnd, colourPlanes ]  To assign a single colour to the entire image:

  •  array[:,:] = (r,g,b) 

  To assign a value to the entire red bit plane:

  •  array[:,:,0] = 255 

  To assign a colour to the first row:

  •  array[ 0 ] = (r,g,b ) 

Examples

• This example shows use of Numeric's (extended) slicing notation to alter an in-memory image. Note that the slice notation allows for standard negative-value index semantics. Also note the accomodating nature of the assignment operation. Assigning a three-tuple to a row sets every value in the row, while assigning a list of three-tuples will set each value individually (and raise an error if the number of items is incorrect).

        def GetBitmap( self, width=32, height=32, colour = (128,128,128), border=5, borderColour=(255,255,255) ):
                # creates a bitmap with a border
                array = Numeric.zeros( (height, width, 3),'c')
                array[border:-border,border:-border,:] = colour
                array[:border,:,:] = borderColour
                array[-border:,:,:] = borderColour
                array[:,:border,:] = borderColour
                array[:,-border:,:] = borderColour
                image = wxEmptyImage(width,height)
                image.SetData( array.tostring())
                return image.ConvertToBitmap()# wxBitmapFromImage(image)

• This example creates a 256-level red gradiant. Note that real-world programs creating gradiants are likely to use 'd' type with 0.0 to 255.0 values to allow for processing the gradiant without integer semantics making things hard, then doing  array.astype( 'c')  before converting to a string.

        def GetBitmap( self ):
                ## Create a 256-level gradiant
                array = Numeric.zeros( (height, width, 3),'c')
                array[:,:,0] = range( 256 )
                image = wxEmptyImage(width,height)
                image.SetData( array.tostring())
                return image.ConvertToBitmap()# wxBitmapFromImage(image)

Screen Capture

• This example captures the client area of a frame to a wxBitmap object (and from there, a file). Note that there is no error checking done here. Should likely use Ok() or something to check each context. I'm not sure what would happen if this were called before the first painting of the screen, likely the context would have the desktop or something in it. Note: code below only captures the client area of the window. Tagore notes that you can get the whole window with a wxWindowDC and arbitrary parts of the screen with a wxScreenDC.

        def OnToFile( self, event ):
                context = wxClientDC( self )
                memory = wxMemoryDC( )
                x,y = self.GetClientSizeTuple()
                bitmap = wxEmptyBitmap( x,y, -1 )
                memory.SelectObject( bitmap )
                memory.Blit( 0,0,x,y, context, 0,0)
                memory.SelectObject( wxNullBitmap)
                bitmap.SaveFile( "test.bmp", wxBITMAP_TYPE_BMP )

Write Text to Bitmap

• Writing text into a bitmap is done by creating a context then using the context's DrawText method to do the actual drawing. A simple example:

from wxPython.wx import *
def _setupContext( memory, font=None, color=None ):
        if font:
                memory.SetFont( font )
        else:
                memory.SetFont( wxNullFont )
        if color:
                memory.SetTextForeground( color )
def write(  text, bitmap, pos=(0,0), font=None, color=None):
        """Simple write into a bitmap doesn't do any checking."""
        memory = wxMemoryDC( )
        _setupContext( memory, font, color )
        memory.SelectObject( bitmap )
        try:
                memory.DrawText( text, pos[0],pos[1],)
        finally:
                memory.SelectObject( wxNullBitmap)
        return bitmap

• One of the things you might want to use this for is creating "button labels" for wxBitmapButtons. The following utility function provides basic centred-text (potentially multi-line) captions for your bitmaps. It also demonstrates the use of the context's GetTextExtent method to perform centring of the text:

from wxPython.wx import *
import string

MINIMUMFONTSIZE = 4

def writeCaption( text, bitmap, font=None, margins = (2,2), color=None ):
        """Write the given caption (text) into the bitmap
        using the font (or default if not given) with the
        margins given.  Will try to make sure the text fits
        into the bitmap.
        """
        memory = wxMemoryDC( )
        font = font or memory.GetFont()
        textLines = string.split( text, '\n' )
        fit = 0
        while not fit:
                totalWidth=0
                totalHeight = 0
                setLines = []
                for line in textLines:
                        if line and line[-1] == '\r':
                                line = line[:-1]
                        width, height = extents = memory.GetTextExtent( line )
                        totalWidth = max( totalWidth,  width )
                        totalHeight = totalHeight + height
                        setLines.append( (line, extents))
                if (
                        totalWidth > (bitmap.GetWidth()- 2*margins[0]) or
                        totalHeight > (bitmap.GetHeight()- 2*margins[0])
                ):
                        size = font.GetPointSize()-1
                        if size < MINIMUMFONTSIZE:
                                fit = 1 # will overdraw!!!
                        else:
                                font.SetPointSize( size )
                                memory.SetFont( font )
                else:
                        fit = 1
        if not setLines:
                return bitmap
        centreX, centreY = (bitmap.GetWidth()/2), (bitmap.GetHeight()/2)
        x, y = centreX-(totalWidth/2), centreY-(totalHeight/2)
        memory.SelectObject( bitmap )
        _setupContext( memory, font, color)
        for line, (deltaX, deltaY) in setLines:
                x = centreX - (deltaX/2)
                memory.DrawText( line, x, y,)
                y = y + deltaY
        memory.SelectObject( wxNullBitmap)
        return bitmap

def _setupContext( memory, font=None, color=None ):
        if font:
                memory.SetFont( font )
        else:
                memory.SetFont( wxNullFont )
        if color:
                memory.SetTextForeground( color )

Great examples. Two notes about the screen capture example:

1. The wxPaintDC should probably be a wxClientDC, since you're presumably doing this outside of an OnPaint method.

2. To capture the whole window use a wxWindowDC. Also, you can capture arbitrary portions of the screen with a wxScreenDC.

This is my first edit, so feel free to refactor it.--Tagore Smith

Thanks Tagore, your changes integrated now

Creating a Variant of a Bitmap with Transparency

To copy a bitmap with a transparent background and draw some more stuff on top, try the following:

# make a new, empty bitmap
w = oldPix.GetWidth();
h = oldPix.GetHeight();
newPix = wxEmptyBitmap(w, h, oldPix.GetDepth());

# create a DC for drawing to it
mem = wxMemoryDC();
mem.SelectObject(newPix);

# do your custom drawing -- stuff drawn before the old
# bitmap will underlay it, stuff drawn after will overlay it
mem.SetPen(wxMEDIUM_GREY_PEN);
mem.DrawLines(((0, h-1), (0, 0), (w-1, 0)));

# now draw the source bitmap contents
mem.DrawBitmap(oldPix, 0, 0, 1);

# all done -- disconnect the DC
mem.SelectObject(wxNullBitmap);

# now get the transparency set up by assigning a new mask
# that is derived from the current contents of the new
# bitmap -- choose the color you use carefully!
newPix.SetMask(wxMaskColour(newPix, wxBLACK));

Since transparency is a bit tricky here is another example. (Which unlike the above, works for me).

In this example two bitmaps are created. One is completly white (oldPix) the other one completly black (newPix). Then a red box is drawn on the black bitmap. Now the black color in newPix is masked and then newPix is copied over oldPix (the white one). The result is, that only the red box is copied.

from wxPython.wx import *

class Test(wxApp):
    def OnInit(self):
        oldPix  = wx.wxEmptyBitmap(300, 300)
        newPix  = wx.wxEmptyBitmap(300, 300)
        mem = wxMemoryDC()
        mem.SelectObject(oldPix)
        mem.Clear()                       # The images have to be cleared
        mem.SelectObject(newPix)          # because wxEmptyBitmap only
        mem.SetBackground(wxBLACK_BRUSH)  # allocates the space
        mem.Clear()

        # We now have a black and a white image
        # Next we plot a white box in the middle of the black image
        
        mem.SetPen(wxRED_PEN)
        mem.DrawLines(((100, 200), (100, 100), (200, 100), (200,200), (100,200)))
        
        mem.SelectObject(oldPix)
        newPix.SetMask(wxMaskColour(newPix, wxBLACK))
        mem.DrawBitmap(newPix, 0, 0, 1)

        oldPix.SaveFile("oldPix.bmp", wx.wxBITMAP_TYPE_BMP)
        newPix.SaveFile("newPix.bmp", wx.wxBITMAP_TYPE_BMP)
        return true

        
app = Test(0)
app.MainLoop()

This is a complete wxPython app, so just run it and have a look at the created Bitmaps oldPix.bmp and newPix.bmp for the results. -- Nikolai Hlubek

PythonMagick

[http://www.procoders.net/moinmoin/PythonMagick PythonMagick] is an imaging library which provides Python bindings for [http://www.graphicsmagick.org/ GraphicsMagick], which is it self a fork of a well known [http://imagemagick.org/ ImageMagick] library. Currently PythonMagick is the only Python-callable library I know of, which provides support for 16-bit images (as well as other bit depths). Actually, there are two version of PythonMagick, one compiled for 8-bit images (known as Q:8, or having quantum number 8) and one compiled for 16-bit images (Q:16). The Q:16 is internally a 16-bit library, i.e., it converts all images internally to 16-bit while the Q:8 version is optimized for 8-bit, so it's a bit faster. These days computers are plenty fast so why limit your self?

At this time PythonMagick only has an installer for Windows. A tar file also exists but there are difficulties getting it to compile on Linux. My understanding is that its because of some boost.python complexity...

Here is a short but complete program. This program uses wxPython GUI, loads an image, displays the image, and does a simple image processing operation (threshold). Various conversions between PythonMagick, PIL, and wxPython images are available on the [http://www.procoders.net/moinmoin/PythonMagick PythonMagick] web site.

   1 from wxPython import wx
   2 import PythonMagick
   3 
   4 ID_FILE_OPEN = wx.wxNewId()
   5 ID_FILE_EXIT  = wx.wxNewId()
   6 ID_THRESHOLD = wx.wxNewId()
   7 
   8 class ImagePanel(wx.wxPanel):
   9     def __init__(self, parent, id):
  10         wx.wxPanel.__init__(self, parent, id)
  11         self.image = None  # wxPython image
  12         wx.EVT_PAINT(self, self.OnPaint)
  13 
  14     def display(self, magickimage):
  15         self.image = self.convertMGtoWX(magickimage)
  16         self.Refresh(True)
  17 
  18     def OnPaint(self, evt):
  19         dc = wx.wxPaintDC(self)
  20         if self.image:
  21             dc.DrawBitmap(self.image.ConvertToBitmap(), 0,0)
  22 
  23     def convertMGtoWX(self, magickimage):
  24         img = PythonMagick.Image(magickimage)  # make copy
  25         img.depth = 8        #  change depth only for display
  26         img.magick = "RGB"
  27         data = img.data
  28         wximg = wx.wxEmptyImage(img.columns(), img.rows())
  29         wximg.SetData(data)
  30         return wximg
  31 
  32 
  33 class mtFrame(wx.wxFrame):
  34     def __init__(self, parent, ID, title):
  35         wx.wxFrame.__init__(self, parent, ID, title, wx.wxDefaultPosition, wx.wxSize(500, 400))
  36 
  37         self.iPanel = ImagePanel(self, -1)
  38         self.im = None  # Magick image
  39 
  40         ## Construct "File" menu
  41         self.menuBar = wx.wxMenuBar()
  42         self.menuFile = wx.wxMenu()
  43         self.menuFile.Append(ID_FILE_OPEN, "&Open image","")
  44         wx.EVT_MENU(self, ID_FILE_OPEN, self.OnOpen)
  45         self.menuFile.AppendSeparator()
  46         self.menuFile.Append(ID_FILE_EXIT, "E&xit", "")
  47         wx.EVT_MENU(self, ID_FILE_EXIT,  self.OnExit)
  48         self.menuBar.Append(self.menuFile, "&File");
  49 
  50         ## Construct "Process" menu
  51         self.menuProcess = wx.wxMenu()
  52         self.menuProcess.Append(ID_THRESHOLD, "Threshold", "")
  53         wx.EVT_MENU(self, ID_THRESHOLD,  self.OnThreshold)
  54 
  55         self.menuBar.Append(self.menuProcess, "&Process")
  56         self.SetMenuBar(self.menuBar)
  57 
  58     def OnOpen(self, event):
  59         fd = wx.wxFileDialog(self, "Open Image", "", "", "*.*", wx.wxOPEN)
  60 
  61         if fd.ShowModal() == wx.wxID_OK:
  62             self.loadImage(fd.GetPath())
  63         fd.Destroy()
  64 
  65     def loadImage(self, path):
  66         try:
  67             self.im = PythonMagick.Image(path)
  68             self.iPanel.display(self.im)
  69         except IOError:
  70             print "can't open the file"
  71 
  72     ##-------------- Process ------------------------
  73 
  74     def OnThreshold(self, event):
  75         self.im = self.Threshold(self.im, 0.5)
  76         self.iPanel.display(self.im)
  77         #self.im.write('d:/threshold.tif')
  78 
  79     def Threshold(self, image, threshold):
  80         """
  81         Threshold image. Input threshold is normalized (0-1.0)
  82         """
  83         img = PythonMagick.Image(image) # copy
  84         img.threshold(threshold *65535.0)
  85         return img
  86 
  87     ##-----------------------------------------------
  88 
  89     def OnCloseWindow(self, event):
  90         self.Destroy()
  91 
  92     def OnExit(self, event):
  93         self.Close(True)
  94 
  95 #---------------------------------------------------------------------------
  96 
  97 class mtApp(wx.wxApp):
  98     def OnInit(self):
  99         frame = mtFrame(wx.NULL, -1, "MagickSimple1")
 100         frame.Show(True)
 101         self.SetTopWindow(frame)
 102         return True
 103 
 104 app = mtApp(0)
 105 app.MainLoop()

-Bob Klimek 9-23-03