图像无法正确裁剪或调整大小

Question

I am trying to build a profile upload system. The user will upload an image, and right before they submit it, they'll have the opportunity to crop the image. I am using the cropbox image crop plugin, I'm also using jQuery validation plugin. Upon submission, the image will be cropped at full size, and then resized to 250px by 250px. Here's a jsfiddle of what I have HTML and jQuery wise.

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

The jQuery validation part works correctly, but what doesn't is the PHP part. Once the user submits the image, it'll be cropped, resized, and then moved to my server. Moving the file to the server works, but cropping the image and resizing doesn't work correctly. When I upload an image, the image gets resized to 250px by 167px and doesn't get cropped properly for some reason. What am I doing wrong?

Answer 1

This line:

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

...seems to be redundant, and it may be causing a proportional resize of the original image. That would explain why the width is correct but not the height (for an image that is taller than it is wide, you'd probably see the inverse).

It seems to me like you just need the $image->cropImage(...) call.

Update :

The Imagick::cropImage function takes the width and height of the crop region and the x/y of the top-left corner. What you're passing instead is the width/height of the full image , not the crop rectangle, so depending on what your xValue and yValue is, you're essentially selecting a crop rectangle that's beyond the boundaries of the image canvas.