Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post

    Cropping an image in browser

    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.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by martynball View Post
    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:

    Code:
    #cropbox { box-shadow:0 0 1000px rgba(0,0,0,0.75); cursor: move;  }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • Users who have thanked rnd me for this post:

    martynball (01-07-2013)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post
    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.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Last edited by vwphillips; 01-09-2013 at 09:11 AM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by martynball View Post
    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...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •