图像没有裁剪或调整大小

Question

我正在尝试构建一个配置文件上传系统。用户将上传图片，在提交图片之前，他们将有机会裁剪图片。我使用的是cropbox图像作物插件，我也使用jQuery验证插件。提交后，图像将以全尺寸裁剪，然后重新调整为250像素×250像素。这里是我有HTML和jQuery明智的jsfiddle。

HTML

<form class="avatar_form" action="" method="POST" enctype="multipart/form-data"> 
    <input id="avatar" style="display: block; margin-top: 20px" type="file" name="avatar"> 
    <input type="hidden" name="width"> 
    <input type="hidden" name="height"> 
    <input type="hidden" name="yValue"> 
    <input type="hidden" name="xValue"> 

    <div id="stage"></div> 
    <input id="upload-btn" type="submit" value="Update profile picture" name="upload"> 
</form> 

jQuery的

$(".avatar_form").validate({ 
    errorElement: 'div', 
    rules: { 

    avatar: { 
     required: true, 
     extension: "jpg|png|jpeg|JPG|PNG|JPEG", 
     filesize: 100000000, 
     minImageSize: { 
     width: 250, 
     height: 250 
     } 
    }, 
    }, 

    messages: { 


    avatar: { 
     required: "You have to provide an image.", 
     extension: "We only accept .jpg and .png images.", 
     filesize: "Your image size should not exceed 100KB", 
     minImageSize: "Your image must be at least 250px by 250px." 

    }, 
    }, 

}); 

var $form = $('.avatar_form'), 
    $upload_btn = $form.find('upload-btn'); 
$form.find('#avatar').change(function() { 
    var $avatar = $(this), 
    $imgBox = $("#stage"); 

    $avatar.removeData('imageSize'); 
    $imgBox.hide().empty(); 

    var file = this.files[0]; 

    if (file.type.match(/image\/.*/)) { 
    $upload_btn.attr('disabled', true); 

    var reader = new FileReader(); 

    reader.onload = function() { 
     var $img = $('<img />').attr({ 
     src: reader.result 
     }); 

     $img.on('load', function() { 
     $imgBox.append($img).show(); 

     $avatar.data('imageSize', { 
      width: $img.width(), 
      height: $img.height() 
     }); 

     $img.css({ 
      display: "none" 
     }); 

     $upload_btn.attr('disabled', false); 

     validator.element($avatar); 
     }); 
    } 

    reader.readAsDataURL(file); 
    } else { 
    validator.element($avatar); 
    } 
}); 



$(function() { 

    $("#avatar").on('change', function() { 
    var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function() { 
     var $img = $('<img />').attr({ 
     src: reader.result 
     }); 

     $img.on('load', function() { 
     $img.cropbox({ 
      width: 250, 
      height: 250 
     }).on('cropbox', function(event, results, img) { 
      $(".width").val(results.cropW); 
      $(".height").val(results.cropH); 
      $(".yvalue").val(results.cropY); 
      $(".xvalue").val(results.cropX); 
     }); 
     }); 

     $('#stage').append($img); 

    }; 
    reader.readAsDataURL(file); 
    }); 
}); 

$.validator.addMethod('filesize', function(value, element, param) { 
    return this.optional(element) || (element.files[0].size <= param) 
}, 'File size must be less than {0}'); 

$.validator.addMethod('minImageSize', function(value, element, minSize) { 
    var imageSize = $(element).data('imageSize'); 
    return (imageSize) && (imageSize.width >= minSize.width) && (imageSize.height >= minSize.height); 
}, function(minSize, element) { 
    return ($(element).data('imageSize')) ? ("Your image's size must be at least " + minSize.width + "px by " + minSize.height + "px") : "Selected file is not an image."; 
}); 

PHP

if(isset($_FILES["avatar"], $_POST["width"], $_POST["height"], $_POST["xValue"], $_POST["yValue"])) 
      { 
       $name = $_FILES["avatar"]["name"]; 

       $temp_name = $_FILES["avatar"]["tmp_name"]; 


          $nameExt = explode('.',$name); 
          $nameExtension = $nameExt[1]; 

          $name = $_SESSION["id"] . "." . $nameExtension; 
          $target_avatar_file = $_SERVER['DOCUMENT_ROOT'] . "/profiles/images/avatars/$name"; 


            $xValue = $_POST["xValue"]; 
            $yValue = $_POST["yValue"]; 
            $image = new Imagick($temp_name); 
            $image->cropImage($_POST["width"], $_POST["height"], $xValue, $yValue); 
             $image->resizeImage(250,250, imagick::FILTER_LANCZOS, 1, true); 

             $image->writeImage($target_avatar_file); 
             $username = $_SESSION["Username"]; 
       $query_file = "/profiles/images/avatars/$name"; 
       $db->query("UPDATE Users SET image = '$query_file' WHERE Username = '$username'"); 
      } 

的jQuery验证部分工作正常，但什么不是PHP的一部分。一旦用户提交图像，它将被裁剪，调整大小，然后移动到我的服务器。将文件移动到服务器可以正常工作，但裁剪图像和调整大小无法正常工作。当我上传图片时，图片被重新调整为250px×167px，并且出于某种原因没有正确裁剪。我究竟做错了什么？

Answer 1

这条线：

$image->resizeImage(250,250, imagick::FILTER_LANCZOS, 1, true); 

...似乎是多余的，并且它可以被造成比例调整大小的原形象。这将解释为什么宽度是正确的，但不是高度（对于高于宽度的图像，你可能会看到反面）。

在我看来，你只需要拨打$image->cropImage(...)。

更新：

的Imagick::cropImage function取修剪区域和左上角的x/y的宽度和高度。你所传递的是的宽度/高度，而不是裁剪矩形，所以根据你的xValue和yValue是什么，你基本上选择了超出图像画布边界的裁剪矩形。