Validate image filetype/filesize, crop, resize & then upload

Question

I'm looking for a client side solution to validate whether the image being uploaded is of accepted file type, file size & then crop the image as directed by user, re-size it to fit within some particular dimensions & then upload the re-sized & optimized image to server.

Are there any well known open-source libraries that can help me implement this ? (Multiple files uploading not needed). I'm not wanting to implement this myself & looking for a library that can provide a cross browser compatible solution with fallbacks for old/unsupported browsers.

I came across plupload & agile uploader, but those don't help in cropping images as per user directions.

---

Using jQuery 1.7. Open to add other libraries too in case required.

Answer 1

peace be upon you brother

i'm using what you want in my project but no ( resize photo as i put custom size for images )

i using ( imgareaselect ) to crop photo

but i don't remember the site of it, maybe: http://odyniec.net/projects/imgareaselect/examples.html

if is it that site right, i'm using this code

   var x1 = null, y1 = null, w = null, h = null, Signal = null, object=null;     function preview(img, selection) {     var img = {         url: jQuery("#image").attr("src"),         width: jQuery("#image").width(),         height: jQuery("#image").height()     }      var scaleX = 128 / selection.width;  // 128 = my custom size ;)     var scaleY = 128 / selection.height;      $(".avatar-box img").replaceWith('<img id="thumbnail" src="'+img.url+'" class="preview" border="0"/>');       $('#thumbnail').css({        width: Math.round(scaleX * img.width) + 'px',        height: Math.round(scaleY * img.height) + 'px',       marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'      });      x1 = selection.x1; y1 = selection.y1; w = selection.width; h = selection.height;    } $(window).ready(function () {  $('#image').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); }); 

and to check the size and type: i use also this script

   $("form").submit(function(){      var OrgFile = $(this).find("[type=file]"),          FileName = OrgFile.val(),          FileExtension = FileName.split('.').pop().toLowerCase();          if(FileName.indexOf(".")==-1 || FileExtension != "jpg" && FileExtension != "jpeg" && FileExtension != "png" && FileExtension != "gif" ){ // Curstom File Extension           alert("This isn't a Photo !");           return false;          }else          if((OrgFile[0].files[0].size/1024/1024) > (1)){ // Max Photo Size 1MB           alert("You Photo is too big !");           return false;          }else{           alert("every thing Fine :)");           return true;          }    }); 

Then if the client submit the cropped image

  $('#create_thumbnail').submit(function() {     $.ajax({      type : "POST",      url : "resize.php",      data : {logged_code: logged_code,x1: x1,y1: y1,w: w,h: h},      success: function(data) {}     });     return false;   }); 

And resize.php file

    function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){         list($imagewidth, $imageheight, $imageType) = getimagesize($image);         $imageType = image_type_to_mime_type($imageType);         $newImageWidth = ceil($width * $scale);         $newImageHeight = ceil($height * $scale);         $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);         switch($imageType) {             case "image/gif":                 $source=imagecreatefromgif($image);                  break;             case "image/pjpeg":             case "image/jpeg":             case "image/jpg":                 $source=imagecreatefromjpeg($image);                  break;            case "image/png":             case "image/x-png":                 imagealphablending($newImage, false);                 imagesavealpha($newImage, true);                   $source=imagecreatefrompng($image);                  break;         }         imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);         switch($imageType) {             case "image/gif":                 imagegif($newImage,$thumb_image_name);                  break;             case "image/pjpeg":             case "image/jpeg":             case "image/jpg":                 imagejpeg($newImage,$thumb_image_name,100);                  break;             case "image/png":             case "image/x-png":                 imagepng($newImage,$thumb_image_name);                   break;       }         chmod($thumb_image_name, 0777);         return $thumb_image_name;     } 

i hope that i help you and understand your question,

please vopte my answer that i want to join php chat room to find one help me in a problem

sorry for my bad english i'm speaking arabic