How to get co-ordinates for image crop

Question

I'm trying to implement YUI image cropper. I know virtually nothing about Javascript - so obviously struggling to understand how it works. Can anyone point me in the right direction for being able to grab co-ordinates of cropping area of image so that I can pass these to PHP script to do the cropping before saving image to file. So far I get the image I want to crop as well as the cropping area which I can drag and use handles to make bigger and smaller:

<script>
// Create a YUI sandbox on your page.
YUI().use('node', 'event', function (Y) {
// The Node and Event modules are loaded and ready to use.

var imgCrop = new YAHOO.widget.ImageCropper('crop1',
 { 
           minHeight: 100,
           minWidth: 200,
           initHeight: 100,
           initWidth: 200
        });

        var cropArea = imgCrop.getCropCoords();

});
</script>

<?php

<img src='$approve' id='crop1' />

?>

Any tips and pointers would be very appreciated as using YUI is proving difficult. Thanks

Answer 1

Firstly, you can crop an image with PHP, so why bother messing with a language you aren't as familiar with?

Second, for what purpose are you cropping the image? A thumbnail?

Here is an example which you may benefit from. This creates a 100x100 (resized and cropped) thumbnail of the original image.

if(preg_match('/[.](jpg)$/', $tfile)) {
    $image = imagecreatefromjpeg($ufile);
} else if (preg_match('/[.](gif)$/', $tfile)) {
    $image = imagecreatefromgif($ufile);
} else if (preg_match('/[.](png)$/', $tfile)) {
    $image = imagecreatefrompng($ufile);
}
$oldx = imagesx($image);
$oldy = imagesy($image);
if ($oldx > $oldy) {
    $offx = ($oldx-$oldy)/2;
    $offy = 0;
    $oldx = $oldy;
} elseif ($oldy > $oldx) {
    $offx = 0;
    $offy = ($oldy-$oldx)/2;
    $oldy = $oldx;
} else {
    $offx = 0;
    $offy = 0;
}
$newim = imagecreatetruecolor(100, 100);
imagecopyresampled($newim, $image, 0, 0, $offx, $offy, 100, 100, $oldx, $oldy);