How to crop the right image with jcrop

Question

I'm trying to implement jcrop function but the output of my cropped image is wrong. Here below are my parts of code. The first part is the PHP script that is called from the POST form at the bottom of my code. After the PHP script there is the JQuery script. And at the bottom there is the form I use to submit the coords of the image I want to crop.

'''
***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>

'''

Result is a wrong cropped area as in 1 you can see the area I want to crop, but in 2 there's the result I get from the Imagejpeg() function.

Could anyone please help me? Thanks

try changing the target width and height to the posted width and height. I remember having issues with the source and the target width being different. — RisingSun
Thank you, I tried but never changed. Could anyone suggest any solution? — ddame

ddame ddame · Accepted Answer · 2019-04-29T07:47:28

The problem was that I set the width in the HTML form to "800" and that makes jCrop not working properly because this width setting has not been taken into consideration in the PHP script.

After changed

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

to

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

everything works fine, but now every image has its own size obviously and result is not nice-looking. How can I improve my PHP script if I add width="70%" to my HTML form? If the width was fixed, it shouldn't be so tricky but I would like the image is responsive to the device I am using (PC, tablet or smartphone). Thanks.

How to crop the right image with jcrop

1 Answers