Created
September 2, 2012 17:54
-
-
Save madan712/3602281 to your computer and use it in GitHub Desktop.
This is the main page which contains an image and where user can select the section to crop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Image Cropper</title> | |
| <script src="jquery.min.js"></script> | |
| <script src="jquery.Jcrop.min.js"></script> | |
| <link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" /> | |
| <script language="Javascript"> | |
| jQuery(function($) { | |
| $('#target').Jcrop({ | |
| onSelect : setCoordinates | |
| }); | |
| }); | |
| function setCoordinates(c) { | |
| //alert("x " + c.x + " y " + c.y); | |
| //alert("w " + c.w + " h " + c.h); | |
| document.myForm.x.value = c.x; | |
| document.myForm.y.value = c.y; | |
| document.myForm.w.value = c.w; | |
| document.myForm.h.value = c.h; | |
| }; | |
| function checkCoordinates() { | |
| if (document.myForm.x.value == "" || document.myForm.y.value == "") { | |
| alert("Please select a crop region"); | |
| return false; | |
| } else { | |
| return true; | |
| } | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <img src="pool.jpg" id="target" /> | |
| <form name="myForm" action="cropper.jsp" method="post" onsubmit="return checkCoordinates();"> | |
| <input type="hidden" name="x" value=""/> | |
| <input type="hidden" name="y" value=""/> | |
| <input type="hidden" name="w" value=""/> | |
| <input type="hidden" name="h" value=""/> | |
| <input type="submit" value="Crop Image"/> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment