How to get variable width & height when cropping with Jcrop and save with PHP GD
Asked Answered
B

1

13

I have an application that has to crop images with variable width & height. but i don't know how to do this with the php gd (Createimagefromjpeg) function

in my code i have:

$targ_w = 400;
$targ_h = 400;

This means that the cropped image will always get this width and height. that's not what i want. i want, in some way crop the images and crop it like i selected it at the crop area like in this picture:

cropped image

now when i crop that image, like in the picture i get this:

square image created

It is a square image because i have to give a width and height. but at every image i crop the sizes are different.

Is there a way (variables, id etc..) to do this?

Thanks :D

EDIT: my code to create the cropped image:

<!DOCTYPE>
<html>
<head>
    <title>Cropped Image</title>
</head>
<body>

<?php
SESSION_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = 400;
$targ_h = 400;
$jpeg_quality = 100;

$src = $_SESSION['target_path'];
$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, 'data/uploads/' . basename($src));
header('Location:'.$src);
exit;
}

?>

</body>
</html>

My code to upload the image:

<!DOCTYPE>
<html>

<head>
    <title>Het Vergeet-mij-nietje</title>
    <link href="style/default.css" REL="stylesheet" TYPE="text/css">
    <script type="text/javascript" src="js/showfunctie.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.Jcrop.min.js"></script>
    <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
</head>

<body>
<center>
    <div id="title">
    <h1><a href="index.php" id="link1">Het "Vergeet-mij-nietje"</a></h1>
    <h3>Upload Systeem</h3>
    </div>

<div id="content1">
    <p><b>Upload hier een afbeelding en druk op upload om hem vervolgens te kunnen bijsnijden.</b></p>
    <form action="uploaded.php" method="post" enctype="multipart/form-data">
        <input type="file" name="filename" />
        <input type="submit" value="Upload" />
    </form>
<br /> <br />

<p align="left"><b>Bekijk hier de gecropte en geuploadde foto's</b></p>


    <p class="album">
        <?php include 'album.php';?>
    </p>

</div>

<div id="copyright">
Copyright &copy; Kees Sonnema & Jan Beetsma
</div>

</body>
</html>

My code to crop the image with JCrop:

<html>
    <head>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/lightbox.js"></script>  
    <link href="style/css/lightbox.css" rel="stylesheet" />
    </head>
<body>

<?php

$page = $_SERVER['PHP_SELF'];

//settings
$column = 6;

// directories
$base = "data";
$uploads = "thumbs";

// get album
$get_album = $_GET['album'];

if (!$get_album)
{
    echo "<b>Selecteer een album:</b><p />";
    $handle = opendir($base);
    while (($file = readdir($handle))!==FALSE)
    {
        if (is_dir($base."/".$file) && $file != "." && $file !=".." && $file !="$uploads")
        {
            echo "<a href='$page?album=$file'>$file</a><br />";
        }
    }
    closedir($handle);
}

else
{
    if (!is_dir($base."/".$get_album) || strstr($get_album,".")!=NULL || strstr($get_album,"/")!=NULL || strstr($get_album,"\\")!=NULL)
    {
        echo "Dit album bestaat niet.";
    }
    else
    {
        $x = 0;
        echo "<b>$get_album</b><p />";
        $handle = opendir($base."/".$get_album);
        while (($file = readdir($handle)) !== FALSE)
        {
            if ($file != "." && $file != "..")
            {
                echo "<table style='display:inline;'><tr><td><a href='$base/$get_album/$file' rel='lightbox'><img src='$base/$get_album/$file' height='150' width='100'></a></td></tr></table>";
                $x++;
            }
                if ($x==$column)
                {
                    echo "<br />";
                    $x = 0;
                }
            }
    }
    closedir($handle);

    echo "<p /><a href='$page'>Terug Naar Albums</a>";

}

?>

</body>
</html>
Brandon answered 11/12, 2012 at 15:13 Comment(0)
H
9

Change the line from

$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

to

$dst_r = imagecreatetruecolor($_POST['w'], $_POST['h']);

=> this will create a new image with selected area, you can delete $targ_w and $targ_h variables.

And change the line from

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);

to

imagecopy(
    $dst_r, $img_r,
    0, 0, $_POST['x'], $_POST['y'],
    $_POST['w'], $_POST['h']
);
Hobbs answered 11/12, 2012 at 16:45 Comment(12)
i can't get this code to work. he doesn't save/show the cropped image. it just gives a blank page.Brandon
Does the cropped image is created? Comment out the 2 last lines and add error_reporting(-1) at the top of the script to show eventual error.Hobbs
I changed the last line to use header() instead of readfile(), still not working?Hobbs
This code does not work. it gives an error. but i can't see what the error is.Brandon
Oh I forgot a comma into the imagecopy() function on the line $_POST['x'), $_POST['y'] ...Hobbs
thanks for the comment. i will try it now, i just couldnt find the problem but it was a silly comma :PBrandon
Nope, still get an error. but because i have a localhost (not xampp) i can't see the error. i still have to change that. but anyway. i can't use this code because it doesn't workBrandon
Can you post all javascript, html and php code you're using please?Hobbs
Answered on the main message, hope it will fix it.Hobbs
uhm. i still get an 400x400 image? that's not what i want. i want an image with the size i cropped it. as i said above. this just does nothingBrandon
First i upload my image. then i crop it and replace the cropped image with the original. so the first js code does not work.Brandon
It works now. for some reason. i only used your last two code blocks.Brandon

© 2022 - 2024 — McMap. All rights reserved.