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;
}