Take the 2-minute tour ×

I need to select a part of html page and get coordinates of selection, not image - i want to realize this like image cropping (square selection area), how can i do it?

in more detail i want next: in browser on html page i'm click button, then all page are disabled and become darkgrey color, but small window is showing in real page color, i can manipulate this window: make it larger or smaller - in result i'm need coordinates of this window.

share|improve this question
we need a lot more info. are you trying to crop in the browser? Client site? What is the end result you are looking for? –  DA. Aug 25 '10 at 22:05
Short answer: With great difficulty –  Tom Medley Aug 25 '10 at 22:05
in browser, so i need javascript implementation. result - coordinates of selected area –  hippout Aug 25 '10 at 22:06
So you just want the coordinates? Or the image too? –  Cristian Sanchez Aug 25 '10 at 22:08
Its not really all that clear what you want. You've got several different answers all assuming serveral different meanings to your question. My interpretation is you want to left click and drag to create a box, like on a windows desktop when selecting icons? So you need the mouse position? Could you clarify? –  Wes Aug 25 '10 at 22:21
add comment

5 Answers

up vote 1 down vote accepted

Set up some mouse event handlers on the target element (e.g. the document, a table, etc...)

  • On mousedown, create a div with a 0,0 size at the point of the click.
  • On mousemove, resize the div to extend to the new coordinates, using the original x,y from the mousedown event as the origin
  • On mouseup, do whatever you want with the div coordinates (the "selection") you've just created.

You can use a css class on this overlay div to give it a dashed or dotted border such that it mimics OS selection boxes.

Edit: That just allows you to specify the coordinates of the selection. If you're actually looking to scrape a cropped image of the html page as it is rendered on the user's computer, you'll need some kind of client browser plugin to do that.

share|improve this answer
add comment

This is not possible unless it's a canvas element. You would need a client side addon to render the image for you.

If you just want the coordinates of their selection, you could overlay a transparent element (a canvas, or div) over the whole page. Then use the mousedown and mouseup events to capture the coordinates of the mouse, and optionally draw some sort of transparent square so they know what they're selecting.

share|improve this answer
i'll render the image after that from html source and if i'll know coordinates of selection than i'll be able to crop what i need –  hippout Aug 25 '10 at 22:08
@hippout: if you're rendering the page server-side to make the image, you have no guarantee what is inside the box on the user's machine is inside the box on your server. Different browsers, different zoom, etc will all make it be different. –  rmeador Aug 25 '10 at 22:42
Yes, rmeador is correct...odds are that what the client sees will be entirely different than what your server-side browser sees. –  DA. Aug 26 '10 at 14:02
add comment

I'm not perfectly sure what you want to accomplish, but perhaps you are trying to display only a portion of a larger part of your page.

In that case, I think you are looking for the css overflow property, which can be set to 'hidden', in order to only display a part of for instance a picture.

More information on the overflow property.

share|improve this answer
add comment

Try Firefox's Web Developer Toolbar plugin. It has an option that allows you to view coordinates.

share|improve this answer
add comment

If I understood you well then this is my way: Just render the page in a <div> (You can put it either directly in html or through <iframe>) then set the some css to the <div> to something like {overflow: hidden; width: 100px; height: 70px}.

To control the offset you need to insert inner <div> and wrap the content of the first one in it, and set the css values to something like {margin-left: -50px; margin-top: -40px;} and you're done.

share|improve this answer
add comment

Your Answer


