how to crop html page, not image

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.