jQuery resize image before saving

Question

I am new to jQuery but im loving it! ive have a problem i cant get round as of yet.

I am using http://www.zurb.com/playground/ajax_upload

which i have got working using the following upload.php

    <?
$time= time();
$uploaddir = 'users/'; //<--  Changed this to my directory for storing images
$uploadfile = $uploaddir.$time.basename($_FILES['userfile']['name']); //<-- IMPORTANT

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    echo $uploaddir.$time.$_FILES['userfile']['name']; // IMPORTANT
    #print_r($_FILES);
} else {
  // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
  // Otherwise onSubmit event will not be fired
  echo "error";
}
?>

i have added the time variable to ensure each image is unique. The problem i have is i want to resize and optimise the image on the fly and i am not sure how to do this.

The resize is the most important featuer i require - for example i would like a max width of 300px for the image that is saved even if it was originally 1000px wide. I need to resize proportionaly ( is that a word? :) )

Any help will be great.

Regards M

Answer 1

To resize images you need libs like GD

The standard function to do this is GD's imagecopyresampled.

In the example is shown one way to resize and keeping the proportion:

//> MAx
$width = 200;
$height = 200;

// Get new dimensions
list($width_orig, $height_orig) = getimagesize($filename);

$ratio_orig = $width_orig/$height_orig;

if ($width/$height > $ratio_orig) {
   $width = $height*$ratio_orig;
} else {
   $height = $width/$ratio_orig;
}

Answer 2

There is two main image manipulation things in PHP, GD or Imagemagick. Both will be able to do what you need. You will need to configure them on your PHP webserver.