crop.php 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <?php
  2. /**
  3. * Jcrop image cropping plugin for jQuery
  4. * Example cropping script
  5. * @copyright 2008-2009 Kelly Hallman
  6. * More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
  7. */
  8. if ($_SERVER['REQUEST_METHOD'] == 'POST')
  9. {
  10. $targ_w = $targ_h = 150;
  11. $jpeg_quality = 90;
  12. $src = 'demo_files/pool.jpg';
  13. $img_r = imagecreatefromjpeg($src);
  14. $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
  15. imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
  16. $targ_w,$targ_h,$_POST['w'],$_POST['h']);
  17. header('Content-type: image/jpeg');
  18. imagejpeg($dst_r,null,$jpeg_quality);
  19. exit;
  20. }
  21. // If not a POST request, display page below:
  22. ?><!DOCTYPE html>
  23. <html lang="en">
  24. <head>
  25. <title>Live Cropping Demo</title>
  26. <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  27. <script src="../js/jquery.min.js"></script>
  28. <script src="../js/jquery.Jcrop.js"></script>
  29. <link rel="stylesheet" href="demo_files/main.css" type="text/css" />
  30. <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
  31. <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
  32. <script type="text/javascript">
  33. $(function(){
  34. $('#cropbox').Jcrop({
  35. aspectRatio: 1,
  36. onSelect: updateCoords
  37. });
  38. });
  39. function updateCoords(c)
  40. {
  41. $('#x').val(c.x);
  42. $('#y').val(c.y);
  43. $('#w').val(c.w);
  44. $('#h').val(c.h);
  45. };
  46. function checkCoords()
  47. {
  48. if (parseInt($('#w').val())) return true;
  49. alert('Please select a crop region then press submit.');
  50. return false;
  51. };
  52. </script>
  53. <style type="text/css">
  54. #target {
  55. background-color: #ccc;
  56. width: 500px;
  57. height: 330px;
  58. font-size: 24px;
  59. display: block;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <div class="container">
  65. <div class="row">
  66. <div class="span12">
  67. <div class="jc-demo-box">
  68. <div class="page-header">
  69. <ul class="breadcrumb first">
  70. <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
  71. <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
  72. <li class="active">Live Demo (Requires PHP)</li>
  73. </ul>
  74. <h1>Server-based Cropping Behavior</h1>
  75. </div>
  76. <!-- This is the image we're attaching Jcrop to -->
  77. <img src="demo_files/pool.jpg" id="cropbox" />
  78. <!-- This is the form that our event handler fills -->
  79. <form action="crop.php" method="post" onsubmit="return checkCoords();">
  80. <input type="hidden" id="x" name="x" />
  81. <input type="hidden" id="y" name="y" />
  82. <input type="hidden" id="w" name="w" />
  83. <input type="hidden" id="h" name="h" />
  84. <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
  85. </form>
  86. <p>
  87. <b>An example server-side crop script.</b> Hidden form values
  88. are set when a selection is made. If you press the <i>Crop Image</i>
  89. button, the form will be submitted and a 150x150 thumbnail will be
  90. dumped to the browser. Try it!
  91. </p>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </body>
  97. </html>