Scalable clipping mask

Question

I need to pin variable images in the form of puzzles like this (not squares): http://www.fernando.com.ar/jquery-puzzle/

I considered the possibility of doing this with a php library like Cairo or GD, but I have practically no experience with these librays, and I don’t see the slightest idea of ​​creating a scaling mask dynamically scaled for images of different sizes.

I am looking for guidance / tips that use the server programming language to complete this task, and preferably an approach to this problem.

Answer 1

You can create an image using GD with the size of the puzzle piece. and then copy the full image to this image with the desired crop to get the desired part of the image.

Then you can simply dynamically color each part of the fragment you want to delete with a specific color (for example, # 0f0), and then use imagecolorallocatealpha to make this color transparent. Do this for each part, and you have parts of the image on the server side.

However, if I, wherever you are, would create a clipping mask for each puzzle in a predefined color. This would make two images per connection (one with a circle end connector and one that includes this round connector). Thus, you can simply copy these masks onto the image to quickly create beautiful edges.

Answer 2

GD is quite complicated, I heard very good things about Image Magick, for which there is a PHP version and a lot of documentation on php.net. However, not all web servers will be installed by default.

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

Answer 3

If you decide to do this using PHP with GD, then the code 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 with a specific size, and then use the imagecopyresampled function to copy the mask image resource to a larger or smaller size. To find out what I mean, check out the _getMaskImage method class 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 this through GD, as far as I can tell, is that you need to do this pixel by pixel at a time if you want to achieve different levels of opacity, so processing a large image can take several seconds. With ImageMagick this may not be the case.