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