dapperry
asked on
Select an image area
I want to display an image on the web page. Then I want the user to be able to select a rectangular area of the image using his/her mouse. (Using a drag and drop tool, much like any in an image editor program). So I need someone to give me two things: 1) Show me javascript for displaying the "cutout" area, preferrably displaying the current coordinates on the status bar whilst they are in the process of selecting. 2) How to get the coordinates of the area they selected when they click a form button.
All code should work for ie 5+ and ns 6 +.
I want to be able to pass the coordinates to a server side program that will create a a separate image file for just the area the user selected.
Any help would be much appreciated.
:) dapperry
All code should work for ie 5+ and ns 6 +.
I want to be able to pass the coordinates to a server side program that will create a a separate image file for just the area the user selected.
Any help would be much appreciated.
:) dapperry
If you are asking for what I think you are... hard to do. I will look around a little later today.
ASKER
kadirsiva ,
Thanks for the links. I looked at them briefly, and will look at them more extensively after a get off of work. WIll I have to create an area tag for each pixel of the image!? Hope not, the code in that page could get mighty big.
davlun20080,
I didn't think it would be easy, hence the 200 pts. Thanks for having a look around though.
BTW,
I just need someone to help me get going in the right direction. I don't need complete code (That would be nice!, but...)
:) dapperry
Thanks for the links. I looked at them briefly, and will look at them more extensively after a get off of work. WIll I have to create an area tag for each pixel of the image!? Hope not, the code in that page could get mighty big.
davlun20080,
I didn't think it would be easy, hence the 200 pts. Thanks for having a look around though.
BTW,
I just need someone to help me get going in the right direction. I don't need complete code (That would be nice!, but...)
:) dapperry
ASKER
kadirsiva ,
Thanks for the links. I looked at them briefly, and will look at them more extensively after a get off of work. WIll I have to create an area tag for each pixel of the image!? Hope not, the code in that page could get mighty big.
davlun20080,
I didn't think it would be easy, hence the 200 pts. Thanks for having a look around though.
BTW,
I just need someone to help me get going in the right direction. I don't need complete code (That would be nice!, but...)
:) dapperry
Thanks for the links. I looked at them briefly, and will look at them more extensively after a get off of work. WIll I have to create an area tag for each pixel of the image!? Hope not, the code in that page could get mighty big.
davlun20080,
I didn't think it would be easy, hence the 200 pts. Thanks for having a look around though.
BTW,
I just need someone to help me get going in the right direction. I don't need complete code (That would be nice!, but...)
:) dapperry
Neither of those do anything like what they're looking to do... though there are some good scripts there.
I doubt you can do this with javascript -- possibly a java applet of some kind, or an activeX control.
I doubt you can do this with javascript -- possibly a java applet of some kind, or an activeX control.
>> I doubt you can do this with javascript
you can't but you can make it look like it is being done. ww imean that there is a transperant <div> whose position and size is being changed , normal css stuff. and then an intelligent js code which does the addition and subtraction and then feeds its results to an hidden input.
dapperry its possible, if you code yourself go ahead and work on what ive told, i can help you with your small problems. but i would honestly tell you that i do not have the time to code it.
you can't but you can make it look like it is being done. ww imean that there is a transperant <div> whose position and size is being changed , normal css stuff. and then an intelligent js code which does the addition and subtraction and then feeds its results to an hidden input.
dapperry its possible, if you code yourself go ahead and work on what ive told, i can help you with your small problems. but i would honestly tell you that i do not have the time to code it.
ASKER
lexxwern,
Yes, I started doing a little exploring on my own last night. I was able to place the img inside of a DIV, and then with some code, I can determine which pixel the cursor is on. I was also able to come up with a hidden blank DIV with a border in the style, which I am able to programmatically appear on the image. Its coming along, but I've got a lot more work to do. I will get back to you as progress (or stumbling blocks) come along.
:) dapperry
Yes, I started doing a little exploring on my own last night. I was able to place the img inside of a DIV, and then with some code, I can determine which pixel the cursor is on. I was also able to come up with a hidden blank DIV with a border in the style, which I am able to programmatically appear on the image. Its coming along, but I've got a lot more work to do. I will get back to you as progress (or stumbling blocks) come along.
:) dapperry
here is just an idea - may be useful may be not and not 100% sure if applicable for NN 6
<input type=hidden name="startpoint_x" value= "">
<input type=hidden name="startpoint_y" value= "">
<input type=hidden name="endpoint_x" value= "">
<input type=hidden name="endpoint_y" value= "">
<input type="image" name="myimage" src="image.jpg"
onMousedown = "this.form.startpoint_x.va
onMousemove="window.status
onMouseup = "this.form.endpoint_x.valu
onClick = "return false;"
>
The input type=image when clicked submits the form and sends to the server in variables name.x and name.y the coordinates of the click (click is after mouseup) so if you want you could ommit the endpoint_x and endpoint_y and remove onClick.
Also I suppose that all processing should be in external functions which could make other fency things, but as I said it's just an idea.
<input type=hidden name="startpoint_x" value= "">
<input type=hidden name="startpoint_y" value= "">
<input type=hidden name="endpoint_x" value= "">
<input type=hidden name="endpoint_y" value= "">
<input type="image" name="myimage" src="image.jpg"
onMousedown = "this.form.startpoint_x.va
onMousemove="window.status
onMouseup = "this.form.endpoint_x.valu
onClick = "return false;"
>
The input type=image when clicked submits the form and sends to the server in variables name.x and name.y the coordinates of the click (click is after mouseup) so if you want you could ommit the endpoint_x and endpoint_y and remove onClick.
Also I suppose that all processing should be in external functions which could make other fency things, but as I said it's just an idea.
OK, I was not able to identify any way to get the select box, like in Photoshop. But I think you can do things this way:
1) create a div that has a background image that is an animated gif, so it looks like the selection box you see on photoshop type programs. put some bi-directional arrows so they know to resize the box using the bottom-right corner as a handle.
2) allow div to be dragabble so the user can position the selection at the upper corner of where they want it, and then they can resize if needed.
2) when user selects the div, with the onmousedown,
track mouse movement and resize the div to stick with the cursor position
3) when the user leaves the focus, with onmouseup, capture the position and dimensions of the div
4) send that info back to the server for processing
1) create a div that has a background image that is an animated gif, so it looks like the selection box you see on photoshop type programs. put some bi-directional arrows so they know to resize the box using the bottom-right corner as a handle.
2) allow div to be dragabble so the user can position the selection at the upper corner of where they want it, and then they can resize if needed.
2) when user selects the div, with the onmousedown,
track mouse movement and resize the div to stick with the cursor position
3) when the user leaves the focus, with onmouseup, capture the position and dimensions of the div
4) send that info back to the server for processing
How big is the image? It will have to fit in the available screen. What if the browser window is a different size? What about different resolution monitors? What if the image doesn't fit in the screen? The mouse position will then be different for different monitors, and if the position of the image on the screen/page is different from where you expected it to be. How will you know what piece of the image it's referring to?
the person will have to absolutely position the image on the screen to do his maths correctly. the image should fit in all browser windows. resolution of monitor should not matter then.
>> How will you know what piece of the image it's referring to?
we store his selection coords in hidden input fields and send to script.
i can say no more. dapperry ww is right, here all a lot of cases which your script must understand and deal with properly.
>> How will you know what piece of the image it's referring to?
we store his selection coords in hidden input fields and send to script.
i can say no more. dapperry ww is right, here all a lot of cases which your script must understand and deal with properly.
I was intrigued with the comments of ww and lexxwern - is it really so hopeless?
So I took my idea from above and turned it in testable code, there was just one bug - the "this.event" has to be just "event".
Even if not the whole image fits in the window the coordinates are taken correct.
The image MUST be relatively positioned or event.offsetX/Y will not work.
A pixel is a pixel no matter what is the sreen resolution, window size etc.
Here is the code that I tested in IE 6:
<html>
<body>
<form onsubmit="alert(this.start
<input type=hidden name="startpoint_x" value= "">
<input type=hidden name="startpoint_y" value= "">
<input type=hidden name="endpoint_x" value= "">
<input type=hidden name="endpoint_y" value= "">
<input type="image" name="myimage" height="400" width="400"
onMousedown = "this.form.startpoint_x.va
onMousemove="window.status
onMouseup = "this.form.endpoint_x.valu
onClick = "return false;"
>
<input type=submit>
</form>
</body>
</html>
Ivan Pavlov
Brainbench MVP for JavaScript
www.brainbench.com
So I took my idea from above and turned it in testable code, there was just one bug - the "this.event" has to be just "event".
Even if not the whole image fits in the window the coordinates are taken correct.
The image MUST be relatively positioned or event.offsetX/Y will not work.
A pixel is a pixel no matter what is the sreen resolution, window size etc.
Here is the code that I tested in IE 6:
<html>
<body>
<form onsubmit="alert(this.start
<input type=hidden name="startpoint_x" value= "">
<input type=hidden name="startpoint_y" value= "">
<input type=hidden name="endpoint_x" value= "">
<input type=hidden name="endpoint_y" value= "">
<input type="image" name="myimage" height="400" width="400"
onMousedown = "this.form.startpoint_x.va
onMousemove="window.status
onMouseup = "this.form.endpoint_x.valu
onClick = "return false;"
>
<input type=submit>
</form>
</body>
</html>
Ivan Pavlov
Brainbench MVP for JavaScript
www.brainbench.com
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Looks like lots of good code. I'll try it all out tonight after work.
Thanks!!!
:) dapperry
Thanks!!!
:) dapperry
ASKER
Thanks ipis !
The code you gave was a great starting point, and got me going a long way to where I want to go. I might post some additional questions as I go along in this project, so please be on the lookout.
:) dapperry
PS - Thanks to everyone else who contributed as well
The code you gave was a great starting point, and got me going a long way to where I want to go. I might post some additional questions as I go along in this project, so please be on the lookout.
:) dapperry
PS - Thanks to everyone else who contributed as well
Visit this link u can get a clear idea about image mapping.
http://www.sbrady.com/hotsource/javascript/mapdis.html
or if u need more about image mapping and scripts use this link.
http://www.hotscripts.com/JavaScript/Scripts_and_Programs/Image_Effects/Image_Display/
Have a nice day :).