jquery - Image upload, resolution check, crop and preview. PHP -

i looking solution upload image, check resolution crop if necessary then preview image before gets printed onto canvas.

i have found loads of examples of nothing straight forward, plus don't want rip off elses work.

asp not option site uses php , on 'nix box.

any pointers appreciated.

basically file need posted php script. can html forms(input type='file') or jquery background uploaders. uploads stored default in temporary directory of web server, current directory can found looking @ output of phpinfo().

next check out $_files global move_uploaded_file(), can find image type type key in $_files array, though can manipulated client side it might better check file type manually using magic byte functions.

once have file uploaded need manipulate it. can use either gd or imagemagick, imagemagick may not built-in php version, gd pretty common. more familar gd, i'll suggest check out functions imagecreatefromjpeg()/png/gif & imagecopyresampled(), can both crop , resample. find out if need crop / resize can check aspect ratio. here's function whipped up:

function fixratio($x, $y, $ratio) {     $ratio = round($ratio,6);     $iratio = round($x / $y, 6);     if ($iratio > $ratio) {         $x = ceil($y * $ratio);     } else if ($iratio < $ratio) {         $y = ceil($x * (1 / $ratio));     }     return array('x' => $x, 'y' => $y); } 

you input width, height & desired aspect ratio & spit out array contains corrected dimensions. it's best specify ratio dividing desired height desired width, e.g. fixratio($x, $y, 640/480). can use info crop image w/ imagecopyresampled(), @ same time can specify function destination width & height. if must 640x480, specify when calling imagecopyresampled(). can use iamgejpeg()/gif/png output image file public directory on server. since it's public can reference via url html form asking user confirm if see or into canvas element.