javascript - 验证图像文件类型/文件大小、裁剪、调整大小然后上传

Question

我正在寻找一个客户端解决方案来验证上传的图像是否具有可接受的文件类型、文件大小，然后按照用户的指示裁剪图像，重新调整其大小以适合某些特定尺寸，然后上传将调整大小和优化的图像发送到服务器。

是否有任何知名的开源库可以帮助我实现这一点？ (不需要上传多个文件)。我不想自己实现这个并寻找一个可以提供跨浏览器兼容解决方案的库，并为旧的/不受支持的浏览器提供后备。

我遇到了 plupload 和敏捷 uploader ，但这些对按照用户指示裁剪图像没有帮助。

<小时/>

使用 jQuery 1.7。如果需要，也可以打开以添加其他库。

Answer 1

愿兄弟平安

我在我的项目中使用了你想要的东西，但没有(调整照片大小，因为我为图像设置了自定义尺寸)

我使用(imgareaselect)裁剪照片

但我不记得它的站点，也许: http://odyniec.net/projects/imgareaselect/examples.html

如果该网站正确，我正在使用此代码

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

并检查大小和类型:我也使用这个脚本

   $("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;
         }
   });

然后如果客户端提交裁剪后的图像

  $('#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;
  });

和resize.php文件

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

我希望能帮助您并理解您的问题，

请投票我的答案，我想加入 php 聊天室来找人帮助我解决问题

抱歉我的英语不好，我说的是阿拉伯语