kailash19 kailash19 - 10 months ago 78
jQuery Question

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?

Answer Source

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.