4 * Jcrop image cropping plugin for jQuery
5 * Example cropping script
6 * @copyright 2008 Kelly Hallman
7 * More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
10 if ($_SERVER['REQUEST_METHOD'] == 'POST')
12 $targ_w = $targ_h = 150;
15 $src = 'demo_files/flowers.jpg';
16 $img_r = imagecreatefromjpeg($src);
17 $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
19 imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
20 $targ_w,$targ_h,$_POST['w'],$_POST['h']);
22 header('Content-type: image/jpeg');
23 imagejpeg($dst_r,null,$jpeg_quality);
28 // If not a POST request, display page below:
33 <script src
="../js/jquery.pack.js"></script
>
34 <script src
="../js/jquery.Jcrop.pack.js"></script
>
35 <link rel
="stylesheet" href
="../css/jquery.Jcrop.css" type
="text/css" />
36 <link rel
="stylesheet" href
="demo_files/demos.css" type
="text/css" />
38 <script language
="Javascript">
44 onSelect
: updateCoords
49 function updateCoords(c
)
57 function checkCoords()
59 if (parseInt($
('#w').val())) return true;
60 alert('Please select a crop region then press submit.');
71 <div
class="jcExample">
74 <h1
>Jcrop
- Crop Behavior
</h1
>
76 <!-- This is the image we
're attaching Jcrop to -->
77 <img src="demo_files/flowers.jpg" id="cropbox" />
79 <!-- This is the form that our event handler fills -->
80 <form action="crop.php" method="post" onsubmit="return checkCoords();">
81 <input type="hidden" id="x" name="x" />
82 <input type="hidden" id="y" name="y" />
83 <input type="hidden" id="w" name="w" />
84 <input type="hidden" id="h" name="h" />
85 <input type="submit" value="Crop Image" />
89 <b>An example server-side crop script.</b> Hidden form values
90 are set when a selection is made. If you press the <i>Crop Image</i>
91 button, the form will be submitted and a 150x150 thumbnail will be
92 dumped to the browser. Try it!
96 <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
97 <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>