I came across this image crop script which is great and looks like it does exactly what I want it to do, but I'm having a lot of problems getting it to work. I've searched for a solution and although other people are having the same problem nobody seems to have a solution so I'd be grateful for any help please.
I can select the area I want to 'crop' but when I click the Crop Image button I just get black thumbnail. I've checked I've got the most up-to-date version of jquery as well as the jcrop script.
This is the code I've got:
<?php
session_start();
if (!empty ($_SESSION['loggedin']) ) {
$_SERVER['PHP_SELF'];
} else {
header("location: index.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 = 100;
$jpeg_quality = 100;
$src = $_POST['filename'];
$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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title; ?></title>
<meta name="description" content="<?php echo $description; ?>" />
<meta name="keywords" content="<?php echo $keywords; ?>" />
<base href="<?php echo $base_url; ?>/">
<link rel="stylesheet" type="text/css" href="../new_site/css/admin.css" />
<link rel="stylesheet" href="../new_site/css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../new_site/js/jquery.Jcrop.js"></script>
<script type="text/javascript">
<script language="Javascript">
// Remember to invoke within jQuery(window).load(...)
// If you don't, Jcrop may not initialize properly
jQuery(window).load(function(){
jQuery('#cropbox').Jcrop({
boxWidth: 700,
boxHeight: 700,
onSelect: updateCoords,
aspectRatio: 1,
bgOpacity: 0.2,
bgColor: 'black',
});
});
function updateCoords(c)
{
$('#CropX').val(c.x);
$('#CropY').val(c.y);
$('#CropW').val(c.w);
$('#CropH').val(c.h);
};
</script>
</head>
<body>
<div id="container">
<div class="artists index">
<div id="homepage_thumbs">
<div style="float: left; margin-right: 25px; height: 750px;"><img src="/uploads/image/filename/<?php echo $filename ?>" alt="<?php echo $title ?>" id="cropbox" title="<?php echo $title ?>" style="border: 1px solid #CCCCCC;"/></div>
<input value="Update Image" type="submit" />
</form>
<!-- This is the form that our event handler fills -->
<form action="new_site/admin/thumbnail_test.php?id=<?php echo $image_id ?>" method="post" onsubmit="return checkCoords();">
<input name="filename" type="hidden" value="/home/bmusa/domain.com/app/webroot/uploads/image/filename/<?php echo $filename ?>"/>
<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="Create Thumbnail" />
</form>
<form method="post" name="delete_Image" style="margin-left: 25px;">
<input type="button" onclick="confirmation()" value="Delete Image">
</form>
<br /><br />
</div>
</div>
</div>
</div>
</body>
</html>