Rendering image on a transparent circle and cropping it


I have a background image: enter image description here,

on which i fuse a circle(or eclipse): enter image description here

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

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?


Answers:


Cropping the image to the same dimensions as the circle and then place it on top of the background image at position posX,posY etc could work as a nice straight forward solution.