Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Select an image area

Posted on 2002-06-18
15
Medium Priority
?
1,049 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:dapperry
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +3
15 Comments
 

Expert Comment

by:kadirsiva
ID: 7090082
Hi dapperry,
 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 :).
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 7090536
If you are asking for what I think you are... hard to do.  I will look around a little later today.

0
 
LVL 3

Author Comment

by:dapperry
ID: 7090670
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
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:dapperry
ID: 7090675
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
0
 
LVL 19

Expert Comment

by:webwoman
ID: 7090937
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.

0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7093248
>> 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.
0
 
LVL 3

Author Comment

by:dapperry
ID: 7093471
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
0
 

Expert Comment

by:ipis
ID: 7095282
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.value = this.event.offsetX;this.form.startpoint_y.value = this.event.offsetY;"
onMousemove="window.status = 'x: '+this.event.offsetX+', y: '+this.event.offsetY;"
onMouseup = "this.form.endpoint_x.value = this.event.offsetX;this.form.endpoint_y.value = this.event.offsetY;"
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.

 
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 7096331
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
0
 
LVL 19

Expert Comment

by:webwoman
ID: 7097737
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?
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7097789
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.
0
 

Expert Comment

by:ipis
ID: 7097892
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.startpoint_x.value+', '+startpoint_y.value+', '+endpoint_x.value+', '+endpoint_y.value); return false;">
<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.value = event.offsetX;this.form.startpoint_y.value = event.offsetY;"
onMousemove="window.status = 'x: '+event.offsetX+', y: '+event.offsetY;"
onMouseup = "this.form.endpoint_x.value = event.offsetX;this.form.endpoint_y.value = event.offsetY;"
onClick = "return false;"
>
<input type=submit>
</form>
</body>
</html>

Ivan Pavlov
Brainbench MVP for JavaScript
www.brainbench.com
0
 

Accepted Solution

by:
ipis earned 800 total points
ID: 7098044
And as in the question was mentioned also the clipping area, here is the full code that displays it:

<html>
<body>

<script>
var isDrag = false;
function startDrag(frm){
     var t, l;
     resetMark();
     isDrag = true;
     event.cancelBubble = true;
     frm.startpoint_x.value = event.offsetX;
     frm.startpoint_y.value = event.offsetY;
     frm.endpoint_x.value = -1;
     frm.endpoint_y.value = -1;
     
     document.all.mark.runtimeStyle.visibillity= "visible";
}
function doDrag(frm){
     event.cancelBubble = true;
     window.status = 'x: '+event.offsetX+', y: '+event.offsetY;
     if(isDrag && event.button == 1){
          frm.endpoint_x.value = event.offsetX;
          frm.endpoint_y.value = event.offsetY;
     var h, w, t, l;
          t = Number(frm.startpoint_y.value) + Number(document.all.myimage.offsetTop);
          l = Number(frm.startpoint_x.value) + Number(document.all.myimage.offsetLeft);
          h = frm.endpoint_y.value - frm.startpoint_y.value;
          w = frm.endpoint_x.value - frm.startpoint_x.value;
         
          if(h < 0) {
               h = -h;
               t = t - h
          }
         
          if(w < 0) {
               w = -w;
               l = l - w
          }
          document.all.mark.runtimeStyle.left = l+"px";
          document.all.mark.runtimeStyle.top = t+"px"
          document.all.mark.runtimeStyle.height = h+"px";
          document.all.mark.runtimeStyle.width = w+"px";
          document.all.mark.innerHTML = "Height: "+h +", Width: "+ w;
     }
}
function endDrag(frm){
     isDrag = false;
     event.cancelBubble = true;
     frm.endpoint_x.value = event.offsetX;
     frm.endpoint_y.value = event.offsetY;
}

function resetMark(){
     document.all.mark.runtimeStyle.left = 0;
     document.all.mark.runtimeStyle.top =  0;
     document.all.mark.runtimeStyle.height =  1;
     document.all.mark.runtimeStyle.width =  1;
     document.all.mark.runtimeStyle.visibillity=  "";
     document.all.mark.innerHTML ="";
}
</script>
<style>
#mark {
     border: dashed 1px #ff0000;
     position: absolute;
     visibillity: hidden;
     height: 1px; width: 1px;
     left: 0px;
     top: 0px;
     overflow: hidden;
     font-size: 8pt;
     text-align: center;
     
}

#myimage {
     cursor: crosshair;
}
</style>
<div id= "mark"></div>
<form onsubmit="alert(this.startpoint_x.value+', '+startpoint_y.value+', '+endpoint_x.value+', '+endpoint_y.value); resetMark(); return false;">
<input type=hidden name="startpoint_x" value= "-1">
<input type=hidden name="startpoint_y" value= "-1">
<input type=hidden name="endpoint_x" value= "-1">
<input type=hidden name="endpoint_y" value= "-1">

<input type="image" id="myimage" height="400" width="400"
onMousedown = "startDrag(this.form);"
onMousemove="doDrag(this.form);"
onMouseup = "endDrag(this.form); return false;"
onClick = "return false;"
><br>
<input type=submit>
</form>
</body>
</html>

I hope that this would help.

Ivan Pavlov
0
 
LVL 3

Author Comment

by:dapperry
ID: 7098605
Looks like lots of good code. I'll try it all out tonight after work.

Thanks!!!

:) dapperry
0
 
LVL 3

Author Comment

by:dapperry
ID: 7101329
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
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question