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

Posted 2023-02-25

【中文标题】如何在同一页面上显示裁剪的图像

【英文标题】：How to show cropped image on same page

【发布时间】：2014-01-14 14:11:04

【问题描述】：

我希望能够对文件进行三次裁剪（这样您就有了大、中、小图像）。现在的问题是 JCrop 正在工作。上传文件有效，您实际上可以“裁剪”文件。问题是在提交按钮上按下时不显示裁剪的文件。

正如您在代码中看到的，我使用函数 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;             
   

?>

【问题讨论】：

只是一个空白页。仅显示表单（从一分钟开始）和文件名，以及 middel 格式：文本。

【参考方案1】：

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

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

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

【讨论】：

当您上传文件（在另一个页面上）设置了该字段时，一切正常。第二次都出错了（所以当 $_POST['x'] 设置时）。

好的，您的showCrop() 函数有两次对exit; 的调用，这将立即停止您的请求（因此可能会给您一个空白屏幕）。 switch() 语句也可能与 case 'jpg': 和 case 'png'; 块不匹配。在switch() 语句中添加default: 部分，以确保这不会导致问题。

switch 语句确实匹配，我已经测试过了。我现在放了出口；最后一次休息的背后；。不工作。我只需要创建裁剪的图像（也许是 imagepng/imagejpg？）并将其保存到一个目录，然后用 回显图像

你是对的，不知何故扩展没有成功。我编辑了 OP，现在我收到两个错误： 警告：imagecreatefrompng() [function.imagecreatefrompng]: 'images/' is not a valid PNG file in test/upload.php on line 114 警告：imagecopyresampled(): 提供的参数在第 118 行的 test/upload.php 中不是有效的图像资源

您为$_POST['image'] 提交的值是一个字符串，虽然它可能是一个文件名，但您的代码不会从服务器加载实际图像，因此这些函数在您之前无法工作纠正这些问题。