Question

I have a background image:
,

on which i fuse a circle(or eclipse):

so that the area equal to circle becomes transparent on the background image just like this:
.

I have used php and image magick to achieve this

Now, I have to insert an image into the hole in such a way that:

1. Image is rendered above the background, so only image area equal
   to photo hole is visible.
2. When I drag the image in photo hole, the image goes in layer behind background and when released again the image is re-rendered as step 1.
3. I also need to crop the image rendered in step 1.

How this can be achieved in php using image magick? Any pointers or help will very useful.

To transfer image below the background on layer, can this be done using z-index?

Answer 1

In order to achieve the above, I took this appraoch:

1. I place a image in a div (exactly surrounding the circle) which is behind the background image. The div has overflow hidden, so I can contain image.

2. In order to drag image I transfer mouse down event on background image to the below div. This can be done using jQuery trigger.

3. Now to crop the image I calculate the x,y offset of images and crop height and width accordingly and send data to server to crop it.

Hope this helps someone else.