123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- <?php
- /**
- * Jcrop image cropping plugin for jQuery
- * Example cropping script
- * @copyright 2008-2009 Kelly Hallman
- * More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
- */
- if ($_SERVER['REQUEST_METHOD'] == 'POST')
- {
- $targ_w = $targ_h = 150;
- $jpeg_quality = 90;
- $src = 'demo_files/pool.jpg';
- $img_r = imagecreatefromjpeg($src);
- $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
- imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
- $targ_w,$targ_h,$_POST['w'],$_POST['h']);
- header('Content-type: image/jpeg');
- imagejpeg($dst_r,null,$jpeg_quality);
- exit;
- }
- // If not a POST request, display page below:
- ?><!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Live Cropping Demo</title>
- <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
- <script src="../js/jquery.min.js"></script>
- <script src="../js/jquery.Jcrop.js"></script>
- <link rel="stylesheet" href="demo_files/main.css" type="text/css" />
- <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
- <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
- <script type="text/javascript">
- $(function(){
- $('#cropbox').Jcrop({
- aspectRatio: 1,
- onSelect: updateCoords
- });
- });
- function updateCoords(c)
- {
- $('#x').val(c.x);
- $('#y').val(c.y);
- $('#w').val(c.w);
- $('#h').val(c.h);
- };
- function checkCoords()
- {
- if (parseInt($('#w').val())) return true;
- alert('Please select a crop region then press submit.');
- return false;
- };
- </script>
- <style type="text/css">
- #target {
- background-color: #ccc;
- width: 500px;
- height: 330px;
- font-size: 24px;
- display: block;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="span12">
- <div class="jc-demo-box">
- <div class="page-header">
- <ul class="breadcrumb first">
- <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
- <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
- <li class="active">Live Demo (Requires PHP)</li>
- </ul>
- <h1>Server-based Cropping Behavior</h1>
- </div>
- <!-- This is the image we're attaching Jcrop to -->
- <img src="demo_files/pool.jpg" id="cropbox" />
- <!-- This is the form that our event handler fills -->
- <form action="crop.php" method="post" onsubmit="return checkCoords();">
- <input type="hidden" id="x" name="x" />
- <input type="hidden" id="y" name="y" />
- <input type="hidden" id="w" name="w" />
- <input type="hidden" id="h" name="h" />
- <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
- </form>
- <p>
- <b>An example server-side crop script.</b> Hidden form values
- are set when a selection is made. If you press the <i>Crop Image</i>
- button, the form will be submitted and a 150x150 thumbnail will be
- dumped to the browser. Try it!
- </p>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
|