How to show cropped image on same page

Question

I want to be able to crop a file three time (so you have a big, medium and small image). The problem right now is that the JCrop is working. Uploading the file works, and you can actually "crop" the file. The problem is that the cropped file is not shown when pressed on the submit button.

As you can see in the code I use a function ShowCrop to keep things tidy, the function is called before the submit form begins. When I run the page I see nothing (no form, no image). Something obviously goes wrong that this function.

I am a beginning PHP scripter, and I am sure there are a lot of faults in this script. Please remind me of those so I can learn!

Here's the code:

<?php
//Original upload
if(isset($_POST['upload']))  {
    $name = '_original';
    $path_info = pathinfo($_FILES['afbeelding']['name']);
    $file_extension = $path_info["extension"];
    $newname = $path_info['filename'].$name.".".$file_extension;

        move_uploaded_file($_FILES['afbeelding']['tmp_name'], 'images/' . $newname);}
            ?>
        <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
        <script type="text/javascript" src="http://www.noobtutorials.nl/voorbeelden/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
        <script type="text/javascript">
        $( function () {
            $('img').Jcrop({
                setSelect: [150, 150, 500, 500],
                onSelect: function (c) {
                    $("input[name=x]").val(c.x);
                    $("input[name=y]").val(c.y);
                    $("input[name=w]").val(c.w);
                    $("input[name=h]").val(c.h);
                }
            });
        });
        </script>
        <?php echo $newname ?>
        Big format:
        <form method="post" action="upload.php">
            <input type="hidden" name="x" value="" />
            <input type="hidden" name="y" value="" />
            <input type="hidden" name="w" value="" />
            <input type="hidden" name="h" value="" />
<input type="hidden" name="fextension" value="<?php echo $file_extension ?>" />
            <input type="hidden" name="name" value=<?php echo $newname ?> />
            <input type="hidden" name="image" value="images/<?php echo $_FILES['afbeelding'][$newname]; ?>" />
            <input type="submit" value="Crop image!" />
        </form>
        <?php
        echo '<img src="getimage.php?file=images/' . $newname . '">';
    }
    phpinfo();
}
else if(isset($_POST['x'])) //GROOT -> MIDDEL
{
    ?>
        <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
        <script type="text/javascript" src="http://www.noobtutorials.nl/voorbeelden/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
        <script type="text/javascript">
        $( function () {
            $('img').Jcrop({
                setSelect: [150, 150, 500, 500],
                onSelect: function (c) {
                    $("input[name=x]").val(c.x);
                    $("input[name=y]").val(c.y);
                    $("input[name=w]").val(c.w);
                    $("input[name=h]").val(c.h);
                }
            });
        });
        </script>
        <?php
    echo $_POST['name'];
    showCrop($_POST['fextension']);
    //echo '<img src="getimage.php?file=images/' . $_POST['name'] . '">';
    ?> Middel formaat:
    <form method="post" action="upload.php">
            <input type="hidden" name="x" value="" />
            <input type="hidden" name="y" value="" />
            <input type="hidden" name="w" value="" />
            <input type="hidden" name="h" value="" />
            <input type="hidden" name="image" value="images/<?php echo $_FILES['afbeelding'][$newname]; ?>" />
            <input type="submit" value="Crop image!" />
        </form><?php
}

function showCrop($ext){
$targ_w = $_POST['w'];
$targ_h = $_POST['h'];
$jpeg_quality = 90;

$src = $_POST['image'];
  switch($ext)
  {
      case '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);
      break;
      case 'png';
      $img_r = imagecreatefrompng($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']);
      move_uploaded_file($dst_r, 'images/' ."test". $newname);
      break;
exit;             
   }
}
?>

Answer 1

I've rewritten the logic of the code so it'll automatically reload the page until each size/crop has been completed.

This isn't pretty code and is lacking a lot of additional functions (database, security, etc), but it demonstrates how you can achieve what you need (hopefully).

<?php

// Resize image and return filename
function saveCrop($source, $destination) {

    // Get extension
    $ext = strtolower(pathinfo($source, PATHINFO_EXTENSION));

    // Resize/Crop image
    switch($ext)
    {
        case 'jpg';
            $img_r = imagecreatefromjpeg($source);
            $dst_r = ImageCreateTrueColor($_POST['w'], $_POST['h']);
            imagecopyresampled($dst_r,$img_r, 0, 0, $_POST['x'], $_POST['y'], $_POST['w'], $_POST['h'], $_POST['w'], $_POST['h']);
            imagejpeg($dst_r, $destination);
            return true;
            break;

        case 'png';
            $img_r = imagecreatefrompng($source);
            $dst_r = ImageCreateTrueColor($_POST['w'], $_POST['h']);
            imagecopyresampled($dst_r,$img_r, 0, 0, $_POST['x'], $_POST['y'], $_POST['w'], $_POST['h'], $_POST['w'], $_POST['h']);
            imagepng($dst_r, $destination); 
            return true;
            break;

        default:
            die('Invalid file extension: ' . $ext);
    }
}

// Save uploaded file to web server for future processing
if ( isset($_FILES['uploaded-file']))
{
    // Check for valid file type
    $ext = strtolower(pathinfo($_FILES['uploaded-file']['name'], PATHINFO_EXTENSION));
    if ( ! in_array($ext, array('jpg', 'png')))
    {
        die('Unsupported file type');
    }
    $source_file = 'images/original-' . $_FILES['uploaded-file']['name'];

    if ( ! move_uploaded_file($_FILES['uploaded-file']['tmp_name'], $source_file))
    {
        die('Unable to move uploaded file (possibly due to write permissions)');
    }

    // Set target file
    $target_file = 'images/large-' . $_FILES['uploaded-file']['name'];

}
// Process crop/resize requests
elseif (isset($_POST['x']))
{
    $source_file = $_POST['source'];
    $target_file = $_POST['target'];

    saveCrop($source_file, $target_file);

    // No more cropping is required after the small image
    if (substr($target_file, 0, 12) == 'images/small')
    {
        header('Location: completed.php');
    }
    else
    {
        // Determine new source file
        $source_file = $target_file;

        // Determine new target file
        $target_file = str_replace(
            array('images/medium', 'images/large', 'images/original'),
            array('images/small', 'images/medium', 'images/large'),
            $target_file
        );
    }
}
?>

    <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
    <script type="text/javascript" src="http://www.noobtutorials.nl/voorbeelden/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
    <script type="text/javascript">
    $( function () {
        $('img').Jcrop({
        setSelect: [150, 150, 500, 500],
            onSelect: function (c) {
                $("input[name=x]").val(c.x);
                $("input[name=y]").val(c.y);
                $("input[name=w]").val(c.w);
                $("input[name=h]").val(c.h);
            }
        });
    });
    </script>

    <form method="post" action="">
        <input type="text" name="x" value="" />
        <input type="text" name="y" value="" />
        <input type="text" name="w" value="" />
        <input type="text" name="h" value="" />
        <input type="text" name="source" value="<?php echo $source_file; ?>" />
        <input type="text" name="target" value="<?php echo $target_file; ?>" />
        <input type="submit" value="Crop" />
    </form>

    <img src="<?php echo $source_file; ?>" id="img">