Using Javascript to select a rectangular area on an image
This is the third example in a series where the mouse is used in Javascript to select points on an image. This allows two points to be selected and then the csImageFile component is used with server side ASP code to show the rectangle. Once a rectangle has been selected it could be used to crop or edit the image, or to add a tag to name a person in the image.
The other examples available allow a user to select a single point and position text with the mouse.
Click on the image to set the coordinates.
First Point:
X:
Y:
Second Point:
X:
Y:
The sample code
The code is in two scripts, one is the web page containing the client side Javascript, and the other is an ASP script which uses csImageFile to generate the image. These can be downloaded from the links below and there is a ReadMe.pdf file explaining how to use them.
Download the sample scripts - rectangle.zip (38 KB)
Download the trial csImageFile component - csift.zip (4.5 MB)
The for a simplified version of this demo, and an online description, look at the example for selecting a single pair of coordinates. That does not include the code for remembering which point is being selected or the server side script to generate the image.