/    Sign up×
Community /Pin to ProfileBookmark

Jigsaw Puzzle king of Image using GD Library

I am working on application (it is in PHP) in which I want to create/have a Jigsaw Puzzle kind of Image. (Sample image has been

attached – Jigsaw-Image.jpg)
I will pass some parameters, with the help of which the Jigsaw Puzzle will get completed.
Like for 10% it will be partially completed and for 100% the Jigsaw Image will be in it Original state. (Sample image has been attached –

Original-Image.jpg)

Please let me know if there is anyway of doing this… I tried the GD2 library, but am unable to figure out the way…

to post a comment
PHP

1 Comments(s)

Copy linkTweet thisAlerts:
@rtretheweyNov 08.2011 — My only idea would be a brute-force approach. Make a separate image for each piece of the puzzle. Each image would be the size of the original with the piece colored white and the rest of the image transparent. You would then overlay all of these puzzle piece images over the original image using z-index to act as a series of masking images. This would let you remove puzzle piece images by setting them to display:none or visibility:hidden, which would allow parts of the original image to show through as desired. Good luck!
×

Success!

Help @abhijeet_avsar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...