Question

I’m creating a image editing program in PHP and Javascript but I can’t work out the math.

The idea is, user uploads a image ( It can be very large, 10 000 x 10 000 pixels and it can be small 500 x 500 pixels) and it’s resized with PHP to fit to workarea (resized to smaller or bigger). Workarea is calculated from users screen size (using Javascript). Original image is stored and thumb is generated. At this point, user can rotate and crop the image. Cropping and rotating is done with the thumb image to save resources (with PHP). Data is saved to session (data as in rotation angle, cropping – x, y, width, height, resize – ratio of width and height (original_image_width / thumb_image_width)). When user clicks on Done button, all those steps are applied to original image. If it’s rotating, total angle is calculated to avoid calling rotating function multiple times. If it’s cropping, the x, y, width and height must be calculated so that cropping takes place only once.

Now this is where it get complicated. Since resizing takes place between each cropping (to fit to workarea) I can’t seem to work out the math to calculate to needed variables (x, y, width, height). Here is what I have so far.

list($width_original, $height_original) = getimagesize($_SESSION['original_file']);

// default variables
$angle = 0; $x = 1; $y = 1; $width = $width_original; $height = $height_original; $xx = 0; $yy = 0;
$ratio_x = 1; $ratio_y = 1;

foreach($_SESSION['history'] as $key => $history)
{
    if($history['action'] == 'resize')
    {
        $ratio_x = $history['ratio_x'];
        $ratio_y = $history['ratio_y'];
    }

    if($history['action'] == 'crop')
    {
        $xx += ($width * $history['x']) / ($history['width'] * $ratio_x);
        $yy += ($height * $history['y']) / ($history['height'] * $ratio_y);

        $x = $history['x'];
        $y = $history['y'];
        $width = $history['width'] * $ratio_x;
        $height = $history['height'] * $ratio_y;

    }
}

The idea is to calculate x and y from last thumb (it’s resized, smaller or larger picture that fits to workarea) and add them together. After that the default variables are replaced with current history values.

I hope I made myself clear. My mind can’t figure it out anymore, can anyone point me to right direction?

Edit: I forgot to add session data. It looks like this:

Array
(
[history] => Array
    (
        [0] => Array
            (
                [action] => crop
                [x] => 173
                [width] => 629
                [y] => 124
                [height] => 208
                [file] => 4fa0f6ffe5844.jpg
            )

        [1] => Array
            (
                [action] => resize
                [ratio_x] => 0.69659863945578
                [ratio_y] => 1.1851851851852
            )

        [2] => Array
            (
                [action] => crop
                [x] => 200
                [width] => 1236
                [y] => 254
                [height] => 66
                [file] => 4fa0f70256940.jpeg
            )

        [3] => Array
            (
                [action] => resize
                [ratio_x] => 0.69659863945578
                [ratio_y] => 7.3846153846154
            )

    )

[id] => e03859m172blidbjl1sj8kfm94
[original_file] => 4fa0f6ffe5844.jpg
[current_file] => 4fa0f705e19d6_final.jpeg
[landscape] => 1
[workarea_height] => 613
[workarea_width] => 1470
)

Answer 1

If i understand you correctly you want to do image edisting such has crop and re-size etc but from your code there are somy things i don’t understand such as

• $history
• foreach($_SESSION['history'] as $key => $history) not sure why you are looping through history
• $ratio_x = 1; $ratio_y = 1; why you have multiple ratios

What i expected form your javascript is something like

• x1, y1
• x2, y2
• angle
• height
• width

x2 and y2 might not be required in most times especially if the user just wants to re-size .. you don’t need x and y ratio … one single ration or scale is ok

Simple Calculation

$ratio = $thumb_width/$width_original;
$newImageWidth = ceil($width * $ratio);
$newImageHeight = ceil($height * $ratio);

Conclusion

There are so many open source java script solution you can look at which have a PHP back end

http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

http://odyniec.net/projects/imgareaselect/

http://deepliquid.com/content/Jcrop_Download.html