SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist vhogarth's Avatar
    Join Date
    Nov 2003
    Location
    Taxachussets
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cropping an image area and saving the area that is cropped

    Hey Guys,

    I want to write a script in php that utilizes GD to crop images. WOuld something like this be possible? Here's what I have in mind. A user uploads a full photo of themselves, but i'm only interested in getting a headshot. I want to give the person a way to crop just their head into a standard size (height: 100px width: 80px). Is there a way i can create a wireframe box overlay that they can drag across the image until they position it over their head. From there they click submit and it transmits the coordinates of the upperleft, upperright, lowerleft, lowerright. Then i'd use the GD library to grab the pixels in that range to create a new image that is only their heads?

    I can theoretically think this problem out, but i dont know where to start to put it into place. First off, i dont even know how i'd do the wireframe box overlay that they would drag around. WOuld that be using some javascript since its client side?

    Has anyone done something like this before, or something similar and wouldnt mind sharing some of their code with me. I think it would be pretty useful for picture rating sites like hotornot or something..

    Any help would be greatly appreciated. Thanks.

  2. #2
    SitePoint Guru godsfshrmn's Avatar
    Join Date
    Mar 2001
    Posts
    671
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do this with some javascript I am sure. I have no idea how difficult this would be though maybe try posting a similar thread over there.
    s c r i p t s f o r y o u . n e t
    ScriptsForYou

  3. #3
    SitePoint Guru dbevfat's Avatar
    Join Date
    Dec 2004
    Location
    ljubljana, slovenia
    Posts
    684
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Go check this page: http://www.walterzorn.com/dragdrop/dragdrop_e.htm, they got all sorts of stuff. Basically, I guess you need a resizeable box and its coordinates when user clicks submit.

  4. #4
    SitePoint Evangelist DMacedo's Avatar
    Join Date
    May 2004
    Location
    Braga, Portugal
    Posts
    596
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use ImageMagick's CONVERT instead of GD, it is much faster and more efficient, and it has the crop option.
    $man convert

    As for the user selection, you can use javascript or coordinates (POST), whichever you prefer.
    ~ Daniel Macedo

  5. #5
    SitePoint Evangelist vhogarth's Avatar
    Join Date
    Nov 2003
    Location
    Taxachussets
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dbevfat
    Go check this page: http://www.walterzorn.com/dragdrop/dragdrop_e.htm, they got all sorts of stuff. Basically, I guess you need a resizeable box and its coordinates when user clicks submit.
    WOW! That is some really cool stuff he's got there. Never seen that done anywhere. That transparent box is EXACTLY what i'm looking for. I'm just not sure how to hack it to make it work. Guess i'll have to do alot of studying up on DHTML+Javascript (i havent really delt much with either)..

  6. #6
    SitePoint Evangelist vhogarth's Avatar
    Join Date
    Nov 2003
    Location
    Taxachussets
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DMacedo
    I would use ImageMagick's CONVERT instead of GD, it is much faster and more efficient, and it has the crop option.
    $man convert

    As for the user selection, you can use javascript or coordinates (POST), whichever you prefer.
    Is imageMagick built into the newere versions of php? or is it an addon i have to install? I'm on a shared hosting solution so i dont have access to configure php..

    Regarding using javascript I dont know how i'd create a transparent box that i can move across an image to grab the coordinates. dbdevfat posted this link: http://www.walterzorn.com/dragdrop/dragdrop_e.htm with an awesome transparent gif that can be moved around the screen, but i dont know how i'd get coordinates from it... I'm a newbie with the client side stuff.

  7. #7
    SitePoint Evangelist DMacedo's Avatar
    Join Date
    May 2004
    Location
    Braga, Portugal
    Posts
    596
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should have it installed on your system, and if you do not have php safe mode enabled you can access it w/no problems. Usually this is the case.

    Else you can always contact your provider and ask them to permit access to it or install the ImageMagick PHP Extension.

    That client side thing will give some headaches to make it work, sorry
    ~ Daniel Macedo

  8. #8
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    466
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is another option on the client side.

    http://www.defusion.org.uk/code/java...scriptaculous/


    Brandon
    Home Recording Forum -
    Make 60% Commission Pushing my new mega system
    Killer Home Recording


Bookmarks

Posting Permissions

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