如何使用jcrop裁剪正確的圖像

Question

我正在嘗試實現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" width="800" 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（）函數的結果。

有人可以幫幫我嗎？ 謝謝

Answer 1

問題是我將HTML表單中的寬度設置為“800”，這使得jCrop無法正常工作，因為PHP腳本中沒有考慮此寬度設置。

改變后

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

至

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

一切正常，但現在每個圖像都有自己的大小，結果不好看。 如果我在我的HTML表單中添加width="70%" ，我該如何改進我的PHP腳本？ 如果寬度是固定的，它應該不是那么棘手，但我希望圖像響應我正在使用的設備（PC，平板電腦或智能手機）。 謝謝。