Results 1 to 17 of 17
  1. #1
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975

    Javascript - select areas on image

    So here my problem:

    I have an image (jpeg if it matters)

    I give it 3-4 sets of coordinates (4 corners of the rectangle)

    And I want to draw a rectangle on the image at those 4 coordinates.
    The rectangle can either be opaque or it could just be a thin border.. either will do


    The tricky part is, I want the user to be able to move each rectangle, and for the movement to update the corresponding coords in a hidden input in a form.


    Thanks a lot for your help.

    sorry if I wasn't specific enough
    Last edited by ilyash; 03-03-2008 at 05:14 PM.

  2. #2
    Join Date
    Feb 2005
    Location
    Australia
    Posts
    5,842
    The rectangle just needs an absolute-positioned div, unless you want an angled rectangle, in which case...

    For the movement you probably want to use an established dHTML api (otherwise you'll need to develop your own with onmousedown, onmousemove, onmouseup and do extensive cross-browser testing). Not sure what's best these days but there are plenty available.
    Chris

    "Some problems are so complex that you have to be highly intelligent and well informed just to be undecided about them." - Laurence J. Peter

  3. #3
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    Any suggestions on which dHTML api?

    I need something simple, in javascript which just updates a form parameter with its current location

  4. #4
    Join Date
    Mar 2008
    Location
    Sheffield, UK
    Posts
    447
    This is probably what you're looking for but it's a tad resource-intensive (uses 1x1 pixels to draw lines): http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

    Are you sure you wouldn't rather use Flash?

  5. #5
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    That works good, but it doesn't allow dragging of the rectangles and getting their coordinates.

    I'm pretty sure this is possible in the same manner as "tagging a photo", but I need each rectangle to be movable at the same time, and their coords updated respectively

    Thanks!

  6. #6
    Join Date
    Nov 2004
    Posts
    258
    I worked on a project recently that required this type of functionality. Check this out and see if this is what your looking for:

    http://www.defusion.org.uk/demos/060519/cropper.php

  7. #7
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    No, It has to be a preset rectangle of a certain size.. and the whole rectangle could be moved.

    But there must be multiple rectangles at the same time on one image

  8. #8
    Join Date
    Nov 2004
    Posts
    258
    Quote Originally Posted by ilyash View Post
    No, It has to be a preset rectangle of a certain size.. and the whole rectangle could be moved.

    But there must be multiple rectangles at the same time on one image
    Yes, this allows you to have a preset rectangle of a certain size and you can also move the whole rectangle around. And yes you can have more then one at the same time. I did this on the project I mentioned.

    Silly

  9. #9
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    Sounds good to me, where can I find the one with multiple rectangles? and pre-defined sizes?

    Thanks a ton

  10. #10
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    anyone?

    If it's not one of those marquee boxes, but rather an opaque box of some color (with text inside of it) it would be even better.

    Thanks again!

  11. #11
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975

  12. #12
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    bummpp.. cmon there has to be a way to do this

  13. #13
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    does anything like this exist?

  14. #14
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    Please guys I really need this

  15. #15
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    bump...

    what im basically looking for is like a script for tagging where I can have multiple "tags" on the screen at the same time.

    The user can then resize them and move them.

    Then I need to pass the coords from the selected areas in a hidden form input field

  16. #16
    Join Date
    Feb 2003
    Location
    Canada
    Posts
    958
    Absolute positioned divs with an opacity tag (or transparent png)

    EasyDrag jQuery plugin for draggable functionality

    Update hidden element with positions (topX, topY, topX+width, topY+height) either onsubmit or on drop (with EasyDrag)

  17. #17
    Join Date
    Dec 2002
    Location
    NY, NY
    Posts
    3,975
    i would need to to be dragged and also I need to somehow mark the center of the absolute div.. with like an X or a circle or something.


    thanks a lot guys

Posting Permissions

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