FM / demos

/home/desid573/book.familycab.com.au/pdd/app/webroot/admin/plugins/jcrop/demos/

/home/desid573/book.familycab.com.au/pdd/app/webroot/admin/plugins/jcrop/demos

Name	Size	Mode	Actions
demo_files/	-	0755	rm
crop.php	2940	0644	edit dl rm
non-image.html	2067	0644	edit dl rm
styling.html	3268	0644	edit dl rm
tutorial1.html	1618	0644	edit dl rm
tutorial2.html	3238	0644	edit dl rm
tutorial3.html	4081	0644	edit dl rm
tutorial4.html	6189	0644	edit dl rm
tutorial5.html	8587	0644	edit dl rm

Edit: /home/desid573/book.familycab.com.au/pdd/app/webroot/admin/plugins/jcrop/demos/crop.php (2940B)

<?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/image5.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" />

$(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="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>

<img src="demo_files/pool.jpg" id="cropbox" />

<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>

Live Cropping Demo

An example server-side crop script. Hidden form values are set when a selection is made. If you press the Crop Image button, the form will be submitted and a 150x150 thumbnail will be dumped to the browser. Try it!