forum_amnesiac
06-17-2009, 08:58 AM
I am trying to adapt a mix of 2 scripts to have an image cropper.
The first step is to get the image file uploaded, I have 2 variables, $load and $crop, which indicate what process to go through. These are set by using the Load Image & Crop Image buttons.
In the first process, to load the image, I get the name of the file in $src and also store it in $savesrc, as shown by 'echo 1'.
This is also shown by 'echo 2' after it has been through the load process.
However, if you then press the Crop button the value of $savesrc, at 'echo 2', is null.
It does not pass through the section that sets it, ie 'echo 1' does not fire.
Can anyone explain to me why this variable loses its value when it does not go through a process that sets it, also how can I keep this value so it doesn't unset.
$load=$_POST['load'];
$crop=$_POST['crop'];
if ($load=="Load Image"){;
$src =trim($_FILES['image']['name']); // get the name of the file they are uploading
if($src!="") {
preg_match('/\.([A-Za-z]+?)$/', $src, $match);
$match[1] = strtolower($match[1]);
$savesrc=$src;
if($match[1] != 'jpg') {
$error = 'File type not supported!';
}
echo "1".$savesrc;
} else
$error = 'No image uploaded!';
}
echo "2=".$savesrc;
if ($crop=="Crop Image"){;
if($savesrc!="") {
echo "3=".$savesrc;
preg_match('/\.([A-Za-z]+?)$/', $_FILES['image']['name'], $match);
$match[1] = strtolower($match[1]);
if($match[1] == 'jpg' && function_exists('imagecreatefromjpeg') || $match[1] == 'jpeg' && function_exists('imagecreatefromjpeg')) {
$targ_w = $targ_h = 250;
$jpeg_quality = 90;
$img_r = imagecreatefromjpeg($savesrc);
$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-Disposition: attachment; filename="'.$_FILES['image']['name'].'"');
header('Content-type: image/'.(($match[1] == 'jpg')?'jpeg':$match[1]));
exit();
} else
$error = 'File type not supported!';
} else
$error = 'No image uploaded!';
}
// If not a POST request, display page below:
?>
<html>
<head>
<title>Resize Image</title>
<script src="jquery.pack.js"></script>
<script src="jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css">
<link rel="stylesheet" href="demos.css" type="text/css">
<script language="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>
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article">
<?php
if($error)
print '<p>'.$error.'</p>';
?>
<h1>Image Cropper</h1>
<!-- This is the image we're attaching Jcrop to -->
<?php if ($load=="Load Image"){
echo '<img src="'.$src.'?'.rand(1,999999).'" id="cropbox"><br>';
}
?>
<form action="" method="post" enctype="multipart/form-data" onSubmit="return checkCoords();">
<?php if ($load!="Load Image"){ ?>
<p>Upload your JPG image: <br>
<input type="file" name="image">
</p>
<input type="submit" name="load" value="Load Image">
<?php } ?>
<br>
<br>
<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" name="crop" value="Crop Image">
</form>
</div>
</div>
</div>
</body>
</html>
The first step is to get the image file uploaded, I have 2 variables, $load and $crop, which indicate what process to go through. These are set by using the Load Image & Crop Image buttons.
In the first process, to load the image, I get the name of the file in $src and also store it in $savesrc, as shown by 'echo 1'.
This is also shown by 'echo 2' after it has been through the load process.
However, if you then press the Crop button the value of $savesrc, at 'echo 2', is null.
It does not pass through the section that sets it, ie 'echo 1' does not fire.
Can anyone explain to me why this variable loses its value when it does not go through a process that sets it, also how can I keep this value so it doesn't unset.
$load=$_POST['load'];
$crop=$_POST['crop'];
if ($load=="Load Image"){;
$src =trim($_FILES['image']['name']); // get the name of the file they are uploading
if($src!="") {
preg_match('/\.([A-Za-z]+?)$/', $src, $match);
$match[1] = strtolower($match[1]);
$savesrc=$src;
if($match[1] != 'jpg') {
$error = 'File type not supported!';
}
echo "1".$savesrc;
} else
$error = 'No image uploaded!';
}
echo "2=".$savesrc;
if ($crop=="Crop Image"){;
if($savesrc!="") {
echo "3=".$savesrc;
preg_match('/\.([A-Za-z]+?)$/', $_FILES['image']['name'], $match);
$match[1] = strtolower($match[1]);
if($match[1] == 'jpg' && function_exists('imagecreatefromjpeg') || $match[1] == 'jpeg' && function_exists('imagecreatefromjpeg')) {
$targ_w = $targ_h = 250;
$jpeg_quality = 90;
$img_r = imagecreatefromjpeg($savesrc);
$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-Disposition: attachment; filename="'.$_FILES['image']['name'].'"');
header('Content-type: image/'.(($match[1] == 'jpg')?'jpeg':$match[1]));
exit();
} else
$error = 'File type not supported!';
} else
$error = 'No image uploaded!';
}
// If not a POST request, display page below:
?>
<html>
<head>
<title>Resize Image</title>
<script src="jquery.pack.js"></script>
<script src="jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css">
<link rel="stylesheet" href="demos.css" type="text/css">
<script language="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>
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article">
<?php
if($error)
print '<p>'.$error.'</p>';
?>
<h1>Image Cropper</h1>
<!-- This is the image we're attaching Jcrop to -->
<?php if ($load=="Load Image"){
echo '<img src="'.$src.'?'.rand(1,999999).'" id="cropbox"><br>';
}
?>
<form action="" method="post" enctype="multipart/form-data" onSubmit="return checkCoords();">
<?php if ($load!="Load Image"){ ?>
<p>Upload your JPG image: <br>
<input type="file" name="image">
</p>
<input type="submit" name="load" value="Load Image">
<?php } ?>
<br>
<br>
<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" name="crop" value="Crop Image">
</form>
</div>
</div>
</div>
</body>
</html>