Scalable clipping mask

I need to to clip variablesized images into puzzle shaped pices like this(not squares): http://www.fernando.com.ar/jquery-puzzle/

I have considered the posibility of doing this with a php library like Cairo or GD, but have little to no experience with these librays, 开发者_如何学Pythonand see no immidiate soulution for creating a clipping mask dynamicaly scalable for different sized images.

I'm looking for guidance/tips on which serverside programing language to use to accomplish this task, and preferably an approach to this problem.

You can create an image using GD with the size of the puzzle piece. and then copy the full image on that image with the right cropping to get the right part of the image.

Then you can just dynamically color in every part of the piece you want to remove with a distinct color (eg #0f0) and then use imagecolorallocatealpha to make that color transparent. Do it for each piece and you have your server side image pieces.

However, if I where you I would create the clipping mask of each puzzle peace in advance in the distinct color. That would make two images per connection (one with the "circle" connecter sticking out and one where this circle connector fits into). That way you can just copy these masks onto the image to create nice edges quickly.

GD is quite complicated, I've heard very good things about Image Magick for which there is a PHP version and lots of documentation on php.net. However, not all web servers would have this installed by default.

http://www.php.net/manual/en/book.imagick.php

If you choose to do it using PHP with GD then the code here may help:

http://php.amnuts.com/index.php?do=view&id=15&file=class.imagemask.php

Essentially what you need to do with GD is to start with a mask at a particular size and then use the imagecopyresampled function to copy the mask image resource to a larger or smaller size. To see what I mean, check out the _getMaskImage method class shown at the url above. A working example of the output can be seen at:

http://php.amnuts.com/demos/image-mask/

The problem with doing it via GD, as far as I can tell, is that you need to do it a pixel at a time if you want to achieve varying opacity levels, so processing a large image could take a few seconds. With ImageMagick this may not be the case.