from PIL import Image, ImageOps, ImageFilter
# the image we want to paste in the transparent mask
background = Image.open("my_background_image.jpg")
# the mask, where we insert our image
mask = Image.open("my_mask.png")
# mask, that we overlay
frame_mask = Image.open("my_frame_mask.png")
# smooth the mask a little bit, if you want
# mask = mask.filter(ImageFilter.SMOOTH)
# resize/crop the image to the size of the mask-image
cropped_image = ImageOps.fit(background, mask.size, method=Image.ANTIALIAS)
# get the alpha-channel (used for non-replacement)
cropped_image = cropped_image.convert("RGBA")
r,g,b,a = mask.split()
# paste the frame mask without replacing the alpha mask of the mask-image
cropped_image.paste(frame_mask, mask=a)
cropped_image.save("my_generated_image.png")

The image for the background

The masks

And here the resulting film strip

The whole idea emerged from Wolfram’s new dojo widget. He created a rating widget, where he uses stars for setting a vote. Because it is using images for each star, you are sticked to the size of your images and also how the images are designed. So I’ve started to code a new widget, that is creating a star as svg/vml/canvas by using the dojox.gfx library. It uses some simple parameters for designing your stars. As I proceeded, I recognized, that there is no javascript-library (or I didn’t saw it :-)), that can create simple (or more complex) geometric forms with just a few input parameters. In my opinion this could be a start to design a general dojox.gfx.geo library, where a base class is defined for common usage (like hovering and basic color schema) and subclasses for each geometric form. I’m thinking of spirals, arrows, stars, hearts and emoticons.

Here some usage examples of this star dojo widget.

First the pretty result

And here the sample code

<div dojoType="dojox.gfx.geo.Star" borderColor="black" borderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" radiuses="20,6,12" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" radiuses="20,5,10,5" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="3" radiuses="20" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="4" radiuses="20" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="10" radiuses="20,17" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="10" radiuses="20,4" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="5" radiuses="20,17,14,17" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

A big star! (Try the mouseover)

Sample code for big star

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="30" radiuses="250,200,250,150,200" specialHoverColor='{type: "radial", r:250, cx: 250, cy: 250, colors: [{offset: 0, color: "#FFFFFF"}, {offset: 1, color: "#FF5A00"}]}’ color=”#F1F3E9″ borderWidth=”1″ hoverBorderWidth=”1″></div>

The next step would be using this star widget within the above mentioned rating-engine. Maybe someone else has a better recommendation, where to use this kind of geometric forms within other widgets.

Here you can download an early version of this star widget:

First draft of the geometric star widget