PHP GD image resize and crop w/ jQuery

Question

Just wanted to put a simple cropper for thumbnails on my site. The jQuery plug-in jCrop grabs the coordinates and sends them to the PHP just fine, I've tested it. The problem is when the PHP crops it, it just leaves me with an empty image that has a "0" filesize. Here's the PHP:

//GRAB DIMENSIONS
        //COORDINATES OF CROPPER BOX
        $getDimX = htmlspecialchars(trim(urldecode($_POST['valX'])));
        $getDimY = htmlspecialchars(trim(urldecode($_POST['valY'])));
        //WIDTH AND HEIGHT OF CROPPER BOX
        $getDimW = htmlspecialchars(trim(urldecode($_POST['valW'])));
        $getDimH = htmlspecialchars(trim(urldecode($_POST['valH'])));
        //SQUARE THUMBNAIL DIMENSIONS
        $targ_w = $targ_h = 150;

        //DIRECTORIES
        $src = '../users/'.$_SESSION['userName'].'/temp/defaultPicTempResizePng.png';
        $defaultDir = '../users/'.$_SESSION['userName'].'/default/defaultPic.png';

        $img_r = imagecreatefrompng($src);
        $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

        imagecopyresampled($dst_r,$img_r,0,0,$getDimX,$getDimY,
        $targ_w,$targ_h,$getDimW,$getDimH);

        imagepng($dst_r, $defaultDir, 100);

        $JSONData = array('true', ' '); 
    echo json_encode($JSONData); 

After some googling, I found some people needing the original width and height of the image. That is easy to obtain and send to the php with jQuery if that's what is needed, but where do I input those if needed? Not sure if that's what I'm doing wrong or there's something incorrect in my php.

Answer 1

Have you considered using timthumb ? It's just 1 script and does everything for you if you pass the correct params. For example (not tested), if you were to want an image like the following:

width = 100
height = 75
quality = 90%
crop x = 0
crop y = 0
crop width = 100
crop height = 75

You'd have to just make a request to something like:

http://yourserver.com/timthumb.php?src=path/to/image.png&w=100&h=75&q=90&cx=0&cy=0&cw=100&ch=75

This will result in a thumbnail of 100x75 of your image, starting from the left upper corner. Timthumb integrates beautifully with jCrop, I've used it on a project too.