如何在同一页面上显示裁剪的图像

时间：2014-01-14 14:11:05

标签： php image jcrop

我希望能够三次裁剪文件（因此你有一个大，中，小图像）。现在的问题是JCrop正在发挥作用。上传文件有效，你实际上可以＆＃34; crop＆＃34;文件。问题是在提交按钮上按下时不显示裁剪文件。

正如您在代码中看到的，我使用函数ShowCrop来保持整洁，在提交表单开始之前调用该函数。当我运行页面时，我什么也看不见（没有形式，没有图像）。这个功能明显出错了。

我是一个PHP脚本编写者，我确信这个脚本中有很多错误。请提醒我那些我可以学习的东西！

以下是代码：

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

1 个答案:

答案 0 :(得分：2)

我已经重写了代码的逻辑，因此它会自动重新加载页面，直到每个尺寸/裁剪完成。

这不是漂亮的代码，缺少很多附加功能（数据库，安全性等），但它演示了如何实现所需（希望如此）。

<?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">
相关问题
最新问题