Revision as of 04:04, 10 February 2012 by hamishwillee (Talk | contribs)

Archived:How to display transparent PNG on canvas with masks in PySymbian

From Nokia Developer Wiki
Jump to: navigation, search
Featured Article
07 Jun
Article Metadata
Tested with
Devices(s): Nokia N82
Platform(s): S60 3rd Edition
Platform Security
Capabilities: )
Keywords: Canvas, graphics, Image
Created: javsmo (27 Apr 2009)
Last edited: hamishwillee (10 Feb 2012)


Although PyS60 is not able to deal with images with alpha information (32-bit or RGBA), there is one way to show transparent GIF and PNG images using the mask parameter on the Image class.


Suppose you have drawn a very cool clock with Inkscape having a transparent background and that you have exported it to PNG and would like to overlay this PNG on a gradient (green to yellow, for example) background.

The first natural move would be the following code (supposing you have the image files in E:\python\lib\ directory):

self.gradient = Image.open(u'E:\\python\\lib\\gradient.png')
self.clock_img = Image.open(u'E:\\python\\lib\\clock.png')

But the result isn't what you would like to see:


To solve this problem there's a mask parameter for the blit method to help graphics to know where the transparent pixels are on the image.

The mask can be a 1-bit image (black and white) or an 8-bit image (grayscale). The blit method doesn't accept other image modes on mask image (12, 16 or 24 bits).

There is an example of an automask function, that automatically creates an image mask from another image, using the first pixel as transparent color on the Nokia Developer Wiki: How_to_display_transparent_image_on_canvas.

def automask(im):
width, height = im.size # get image size
mask = Image.new(im.size, '1') # black and white
tran = im.getpixel((0,0))[0] # transparent top-left
for y in range(height):
line = im.getpixel([(x, y) for x in range(width)])
for x in range(width):
if line[x] == tran:
mask.point((x,y), 0) # mask on the point
return mask

This function creates a mask image to be used with the blit method as shown below:

self.gradient = Image.open(u'E:\\python\\lib\\gradient.png')
self.clock_img = Image.open(u'E:\\python\\lib\\clock.png')
self.mask = automask(self.clock_img)
self.canvas.blit(self.clock_img, mask=self.mask)

The result of applying this function is a lot better than the black background replacing transparent pixels, but it doesn't support anti-alias and partially transparent pixels.

The result is shown below (note the absence of anti-alias on clock boundaries):


The solution for the anti-alias and partially transparent pixels is a mask with 8-bit depth, where black is 100% transparent and white is 0% transparent. The grayscale gives the percentage of opacity of each pixel.

Using your favorite image processing program (for example Gimp), you can extract only the alpha channel and export it as grayscale. You'll have to invert the image to have white instead of black and vice-versa, like the image below.


With this image mask, you can use the code below to apply the mask and use the PNG transparency:

self.gradient = Image.open(u'E:\\python\\lib\\gradient.png')
self.clock_img = Image.open(u'E:\\python\\lib\\clock.png')
mask = Image.open(u'E:\\python\\lib\\clock-mask.png')
self.mask = Image.new(mask.size, 'L') #grayscale 8-bit
self.mask.blit(mask) #convert the png to 8-bit grayscale
self.canvas.blit(self.clock_img, mask=self.mask)

The result is shown below:


You can notice that the image is perfectly merged with gradient background with a little shadow on the right side of clock.

Portuguese Version

Como exibir imagens PNG no canvas

154 page views in the last 30 days.