PHP image crop

[princeofpersiaa]

Hi guys,

I have a php crop issue, I am using Jcrop (JQUERY plugin) to allow users crop their user profile picture jquery doesnt have an issue (is easy to select) but when processing image crop in PHP, image crop doesnt work and all i get is an empty page with no image icon and link is the same url of the page and not picture, so this all happens in same page. Could you please let me know what im doing wrong?

My GD is enabled as below

GD Support enabled
GD Version bundled (2.0.34 compatible)
FreeType Support enabled
FreeType Linkage with freetype
FreeType Version 2.2.1
GIF Read Support enabled
GIF Create Support enabled
JPG Support enabled
PNG Support enabled
WBMP Support enabled
XPM Support enabled
XBM Support enabled

and this is my code

<?php
include_once ("../../../includes/functions.inc");
include_once ("../../../includes/mainheader.php");
authenticate();


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


<div class='alert alert-block'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>Important!</h4>
  We only accept Gif, JPG, JPEG, BMP and PNG file formats. Please make sure your picture file size doesn't exceed more than 300KB.
</div>
<?php
define ("MAX_SIZE",409600);
$path = "../../static/images/profile-pic/";
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST['submit']))
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];

if ($_FILES["photoimg"]["name"] > MAX_SIZE)
{
echo"<div class='alert alert-error'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>File Size Exceeded!</h4>

</div>";

}
else
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
$actual_image_name =$_SESSION['account_ref'].time().substr($txt, 5).".".$ext;

$tmp = $_FILES['photoimg']['tmp_name'];

if(move_uploaded_file($tmp, $path.$actual_image_name))
{
$_SESSION['image_name']=$actual_image_name;
$insert=mysql_query("INSERT INTO profile_pic (profile_pic,account_no,img_session) VALUES ('$actual_image_name', '".$_SESSION['account_ref']."','".$_SESSION['image_name']."')");

}
else
echo"<div class='alert alert-error'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>There is an error!</h4>

</div>";

}
else
echo"<div class='alert alert-error'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>Invalid File Format!</h4>

</div>"; 
}
else
echo"<div class='alert alert-error'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>No Photo?</h4>

</div>"; 
}


?>

<div class="single-page-header">
  <h1 class="pages-header">Upload Your Profile Picture</h1></div>

<div class="single-page-content">

<div class="span8 activate-login">
<?php

$select=mysql_query("SELECT * FROM profile_pic WHERE img_session='".$_SESSION['image_name']."'");
while($row=mysql_fetch_array($select)) {

$actual_image_name=$row['profile_pic']; 
}

?>
<div class="image-decorator">
                <img alt="profile-pic" height="360" id="cropbox" src="<?php echo"../../static/images/profile-pic/$actual_image_name"; ?>" width="480" />
            </div>

<div>



<form id='' method='post' enctype='multipart/form-data' class='form-horizontal'>
 <input type='file' name='photoimg' id='photoimg' />
<input type='hidden' name='image_name' id='image_name' value='<?php echo($actual_image_name)?>' />

        <button type='submit' class='btn btn-primary' name='submit'>Upload</button>

</form>

<?php if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['crop']))
{
    $targ_w = $targ_h = 150;
    $jpeg_quality = 90;

    $src = '../../static/images/profile-pic/$actual_image_name';
    $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,$output_filename,$jpeg_quality);

    exit;
}


?>



        <!-- This is the form that our event handler fills -->
        <form action="profile-picture.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" name="crop"/>
        </form>


<?php include_once ("../../../includes/footer.php"); ?>

many thanks in advance

[tiggsy]

If you're picking up the crop info in a browser-side script, you will have to use a browser side script to perform the crop, as the server side stuff has already executed.

[princeofpersiaa]

I think I have, this is the code

</form>
<?php if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['crop']))
{
    $targ_w = $targ_h = 150;
    $jpeg_quality = 90;
    $src = '../../static/images/profile-pic/$actual_image_name';
    $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,$output_filename,$jpeg_quality);
    exit;
}
?>