Link to home
Start Free TrialLog in
Avatar of jamestse
jamestse

asked on

In a image click a point and drag down and release


In a HTML file containg a image file (without x,y boundaries) with full size to display.
I want to click the x,y in image file, click a point and drag down and release. It could construct the rectangle.
It serves the purphose to get the 4 (x,y) point in the rectangle.
It make us to crop the image.
Can javascript do that?
Will need to write java class to get that result.
Is any solution for that, or any url having sample program for them
Avatar of hermaf
hermaf

Do I get that correct: You want to resize the image with a rectangle you describe with your mouse or you just want to move it ? Moving would be easy ... resizing ... lets try ;)
Try my script. You can download it from here:

http://todoweb.webhostme.com/drag.zip

xabi
ASKER CERTIFIED SOLUTION
Avatar of xabi
xabi

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Michel Plungjan
Recycle ;-)
hehehehe! sure

xabi

Ps: Nice to see you Michel
Is this what you need??


<HTML>
<head>
<style type="text/css">
..container1 {position:absolute; left:20; top:20; width:0; height:0;}
</style>
<script>

var x1,y1,x2,y2;

function mDown(e){
 if(document.all){
    e=event;
    x1=e.x;
    y1=e.y;
 }
 if(document.layers){
    x1=e.pageX;
    y1=e.pageY;
 }
 return false;
}

function mUp(e){
 if(document.all){
    e=event;
    x2=e.x;
    y2=e.y;
 }
 if(document.layers){
    x2=e.pageX;
    y2=e.pageY;
 }
 if(x2<x1)  {
   var tmp=x1;
   x1=x2;
   x2=tmp;
 }
 if(y2<y1)  {
   var tmp=y1;
   y1=y2;
   y2=tmp;
 }
 var d=getDivSizes('container1');
 clipDiv('container1',x1-d.x,y1-d.y,x2-x1,y2-y1);
 return false;
}

function mDrag(){
 return false;
}

function Dimension(x,y,w,h) {
  this.w=w; this.h=h; this.x=x; this.y=y;
}

function getDivSizes(id){
 var x,y,w,h,o;
 if(document.layers) {
     o=document[id]
     x=o.left;
     y=o.top;
     if(o.height==null) o.height=o.clip.height;
     if(o.width==null)  o.width=o.clip.width;
     h=o.height;
     w=o.width;
  }
  if(document.all) {
     o=document.all[id]
     x=o.offsetLeft;
     y=o.offsetTop;
     w=o.scrollWidth;
     h=o.scrollHeight;
  }
  return new Dimension(x,y,w,h);
}


function clipDiv(id,x,y,w,h){
  if(document.layers){
    o=document[id]
    o.clip.top=y;
    o.clip.left=x;
    o.clip.width=w;
    o.clip.height=h;
  }
  if(document.all){
    o=document.all[id]
    o.style.clip='rect('+y+' '+(x+w)+' '+(y+h)+' '+x+')';
    o.clipLeft=x;
    o.clipTop=y;
    o.clipWidth=w;
    o.clipHeight=h;
  }
}
</script>
<body>

<div ID="container1" class="container1"><IMG SRC="FutureSceneTest2.jpg" border=0></DIV>

<script>

var o;
if(document.all){
 o=document.all['container1'];
}
if(document.layers){
 o=document['container1'];
 document['container1'].captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
 window.onmousemove=mDrag;
}
o.onmousemove=mDrag;
o.onmousedown=mDown;
o.onmouseup=mUp;

</script>
</BODY>
</HTML>


Script tested with NN4.61 and MIE5.01
Win95

Virtual_Max
all that does when I use it that I can see is it hides the image when I click on it, can't drag it..
anyone else try it?
Try XABI's code before answering, it really does the job!!!

Michel
kollegov:

as Michel said Try my code before proposing an answer. My code really does the job with a drag box.

xabi
bassque as I understood your question you need code

press - drag - release mouse
to define cropping rectangle and crop image.
And image will be cropped.
That what script do.
If you click in one point this will define rectangle with 0,0 width and height and will crop image completely.

Xabi, I like your one :-)
But you must post solution here for
someone else who would search through EE for something similar later :)
Avatar of jamestse

ASKER

Comment accepted as answer
Deeply thanks your answer. That is straight forward.
Does anyone still have the code? I am looking for this kind of  thing for ages :)
please email me at michel at irt.org
Hi Michel:
  Long time, no see. Do you still have my code? If so please E-mail me it too :)))


Xabi
haha - you can buy it off me ;-)
Sent it to eresmas ok?
Thanks a lot Michel:

  Hope you have a happy new year.

Xabi
Hi there again:

  I put the file online again here:

  http://xa.bi/files/drag.zip

  Xabi
Hi Xabi,

Just a quick pat on the back for creating this example.

Its great!

Also - going to list some keywords for future lookers: JavaScript Image Area Selection Drag Dragable Selector Crop Cropping.

Thanks again - do you have a website you would like a link to on the page I used the script?  (shall I use the one in the source?).

Cheers

Bob
Thanks Bob.

You can link me to http://xa.bi

and as you can see ... the zip is in http://xa.bi/files/drag.zip

Xabi
Hi everyone,

Back already - does anyone know of a simply way to 'disable' and 'enable' the drag functionality?  I want to put the feature on a tool bar so you can turn it on and off.

Thanks

Bob
With the "OLD" code provided:

function setLayer(bDraggable) {
  if (bDraggable) {
    drag.onDragStart = dragStart
    drag.onDragMove = dragMove
    drag.onDragEnd = dragEnd    
  } else {
    drag.onDragStart = new Function()
    drag.onDragMove = new Function()
    drag.onDragEnd = new Function()
  }
}

Xabi
Hi Xabi,

Just a quick pat on the back for creating this example.

Its great!

Also - going to list some keywords for future lookers: JavaScript Image Area Selection Drag Dragable Selector Crop Cropping.

Thanks again - do you have a website you would like a link to on the page I used the script?  (shall I use the one in the source?).

Cheers

Bob
Hi Xabi,

Just a quick pat on the back for creating this example.

Its great!

Also - going to list some keywords for future lookers: JavaScript Image Area Selection Drag Dragable Selector Crop Cropping.

Thanks again - do you have a website you would like a link to on the page I used the script?  (shall I use the one in the source?).

Cheers

Bob
once I get the X1 Y1 and X2 Y2 coordinates how do I crop the image and show it as a different image?
Hihi...

Xabi's code really helped me!! I happened to be looking for a scalable outline of the hot spot for my task.

May I know how I can duplicate another scalable rectangle after dragging and releasing the first one? It's like creating hotspots on the image map on the web.

Thanks!!

Sincerely,
StrawBerry
New smaller, better, faster and 100% my code version at:

http://xa.bi/drag

see ya!
VERY nice.
One suggestion, a single click (mousedown and up) should deselect whatever was selected
Is there a way so that you can constrain the width to be a certain ratio of the height?

Like if I need the width to always be 2 times wider than the height.

I need to develop a page that users can crop their photo for printing and it has to be a certain ratio.
Hi sillyrabbit,

I could really do with this feature as well, you I work it out I'll post the answer here.

Cheers

Bob

P.S. Is anyone finding the re-designed version of EE really slow?
I managed to get it to a certain ratio, but kind of bugs out when you don't start from the top left and drag to the bottom right.

I just changed the function dragMove()

function dragMove(x,y) {
  iIniX2 = iIniX
  iIniY2 = iIniY
  iEndX = iIniX2 + this.obj.x - iX
  //iEndX=iEndY-iIniY2
  //iEndX=iEndX*1.5627
  //iEndX=iIniX2+iEndX
  iEndY = iIniY2 + this.obj.y - iY
  if (iEndX < iIniX2) {
    iTmpX = iIniX2
    iIniX2 = iEndX
    iEndX = iTmpX
  }
  if (iEndY < iIniY2) {
    iTmpY = iIniY2
    iIniY2 = iEndY
    iEndY = iTmpY
  }
  if (iEndX >= iWidthX) iEndX = iWidthX-1
  if (iEndY >= iHeightY) iEndY = iHeightY-1
  if (iIniX2 <0) iIniX2 = 0
  if (iIniY2 <0) iIniY2 = 0
      tempEndX=iEndY-iIniY2
      tempEndX=tempEndX*1.5627
      tempEndX=iIniX2+tempEndX
      if (tempEndX >= iWidthX) {
            tempEndX = iWidthX-1
            iEndY = lastY
      } else {
            lastY = iEndY
      }
      layertop.clipTo(iIniY2,iEndX,iIniY2+1,iIniX2)
      layertop.clipTo(iIniY2,tempEndX,iIniY2+1,iIniX2)
      //layerdown.clipTo(iEndY,iEndX,iEndY+1,iIniX2)
      layerdown.clipTo(iEndY,tempEndX,iEndY+1,iIniX2)
      layerleft.clipTo (iIniY2,iIniX2+1,iEndY,iIniX2)
      //layerright.clipTo(iIniY2,iEndX+1,iEndY+1,iEndX)
      layerright.clipTo(iIniY2,tempEndX+1,iEndY+1,tempEndX)
      document.myform.inix.value = iIniX2
      document.myform.iniy.value = iIniY2
      //document.myform.endx.value = iEndX
      document.myform.endx.value = tempEndX
      document.myform.endy.value = iEndY
}


Also.... I can't get this script to work in Netscape 7.  I really really need to get this working in Netscape 7 ASAP.
I can't get this script to work in Netscape 7.  Does anyone have any solutions to this?
Look in the Tools, Web development, JavaScript console
How do you use it?  I can't figure out how to open up Javascript code in it, I only see one box where I can paste one line of code.
It will show the error if any
I found this great script that works with Netscape, IE, and Opera

http://www.walterzorn.com/dragdrop/dragdrop_e.htm