如何使用 jcrop 裁剪正确的图像

Posted 2023-02-25

【中文标题】如何使用 jcrop 裁剪正确的图像

【英文标题】：How to crop the right image with jcrop

【发布时间】：2019-04-24 22:06:07

【问题描述】：

我正在尝试实现 jcrop 功能，但我的裁剪图像的输出是错误的。 下面是我的部分代码。第一部分是从我的代码底部的 POST 表单调用的 php 脚本。 PHP 脚本之后是 JQuery 脚本。在底部有我用来提交我要裁剪的图像坐标的表单。

'''
***PHP script**
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')


    $targ_w = 800;
    $targ_h = 800;


    $jpeg_quality = 100;

    $src='images/boolprv.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);

imagedestroy($dst_r);
    exit;

?>
***** jquery script ***
<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>
*****html form****

<img src= "images/boolprv.jpg"  id="cropbox" /> 


        <form action="cropfirst.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" />
      Nome: <input type="text" name="nome"><br>
   Cognome: <input type="text" name="cognome"><br>
            <input type="submit" value="Crop Image" />
        </form>

'''

结果是一个错误的裁剪区域，如1，您可以看到我要裁剪的区域，但在2，这是我从 Imagejpeg() 函数得到的结果。

谁能帮帮我？ 谢谢

【问题讨论】：

尝试将目标宽度和高度更改为发布的宽度和高度。我记得有源和目标宽度不同的问题。

谢谢，我试过了，但从未改变。谁能提出任何解决方案？

【参考方案1】：

问题是我将 HTML 表单中的宽度设置为“800”，这导致 jCrop 无法正常工作，因为 PHP 脚本中没有考虑到此宽度设置。

修改后

<img src= "images/boolprv.jpg" width="800" id="cropbox" />

到

<img src= "images/boolprv.jpg" id="cropbox" />

一切正常，但现在每个图像显然都有自己的大小，结果不好看。如果我将width="70%" 添加到我的 HTML 表单中，如何改进我的 PHP 脚本？ 如果宽度是固定的，它不应该那么棘手，但我希望图像能够响应我正在使用的设备（PC、平板电脑或智能手机）。 谢谢。