Solved

Select an image area

Posted on 2002-06-18
15
1,013 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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 200 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery Animate Left Right 2 44
jQuery one function to process 3 clicks 7 26
Phone Dialer 5 36
Jquery autocomplete 10 26
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now