Saturday, September 8, 2012

How to create a Jigsaw puzzle using JSP and Javasacript?


What is Jigsaw puzzle?
A Jigsaw puzzle is a tiling puzzle that requires the assembly of numerous small pieces. Each piece usually has a small part of a picture on it; when complete, a jigsaw puzzle produces a complete picture.

In this article we will see how to create a Jigsaw puzzle using javascript. Initially you will require to cut an image into various pieces, that can be done using a simple java program.

Please see the below Java program that will cut an image into number of pieces for a Jigsaw puzzle. Just provide the desire number of rows and column, it will automatically cut an image into that number of pieces.

Please see the self explanatory Java program below


Output

Original image : TajMahal.jpg


Generated image pieces :

 

 

 

 

So now when the image pieces are generated, we can go ahead with our webpage to create Jigsaw puzzle with the help of javascript. Create a JSP page and add the below codes, make sure to check the paths of the image pieces and see the output. This is the very basic functionality of Jigsaw puzzle. You can customize it according to your requirement and add number of other features to it.

Output