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:
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 width accordingly and send data to server to crop it.
Hope this helps someone else.