Cropping an image in browser

[martynball]

Hey, I need to give a user the ability to move a box around over and image to select an area, and then crop the image based on the area within the box.

Facebook has this feature when you change your display picture. What I don't understand is how you get the coordinates of each corner of the box and how Facebook dulls the rest of the image around the box.

I understand how to use the server side code to actually create the image, I just need to use JavaScript to get the coordinates.

[rnd me]

Originally Posted by martynball

Hey, I need to give a user the ability to move a box around over and image to select an area, and then crop the image based on the area within the box.

Facebook has this feature when you change your display picture. What I don't understand is how you get the coordinates of each corner of the box and how Facebook dulls the rest of the image around the box.

I understand how to use the server side code to actually create the image, I just need to use JavaScript to get the coordinates.

those numbers are available as event attributes on mouseup, and mousemove event handlers.
clientX et al, just lookup the mouse events.

you can grey out the rest with css:

#cropbox { box-shadow:0 0 1000px rgba(0,0,0,0.75); cursor: move;  }

[martynball]

the box-shadow doesn't stay within a containing div, it overflows so can't use that. I just used Firebug to look at Facebook's technique, it uses "clip" which is in CSS3 and seems to be supported by all browsers.

[vwphillips]

http://www.vicsjavascripts.org.uk/Im...ds/130108A.htm


http://www.vicsjavascripts.org.uk/Im...eMapCoords.htm

[Old Pedant]

I created my own a couple of years ago. I just used a <div> with a boundary and transparent contents and then allowed the user to drag the bottom right corner to enlarge/shrink/resize the bounds and drag any place else to move the "box".

I didn't bother "shading" the image, but I could have easily enough.

It wasn't pretty, but it worked quite well.

[rnd me]

Originally Posted by martynball

the box-shadow doesn't stay within a containing div, it overflows so can't use that. I just used Firebug to look at Facebook's technique, it uses "clip" which is in CSS3 and seems to be supported by all browsers.

it depends on box vs inline. a relative container should cut off an absolute child's shadow without forcing AP on everything...