画像が正しくトリミングされない、またはサイズが変更されない

Question

プロファイルアップロードシステムを構築しようとしています。ユーザーは画像をアップロードし、提出する直前に画像を切り抜くことができます。私は、cropbox画像のクロッププラグインを使用しています、私はまた、jQueryの検証プラグインを使用しています。送信すると、画像はフルサイズで切り取られ、250px×250pxにサイズが変更されます。ここには私がHTMLとjQueryを賢明に持っているもののjsfiddleがあります。 jQueryの検証一部が正しく動作

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

しかし、PHPの部分は何ですか？ユーザーが画像を送信すると、その画像は切り取られ、サイズが変更され、次にサーバーに移動されます。ファイルをサーバーに移動すると動作しますが、イメージをトリミングしてサイズ変更すると正しく動作しません。画像をアップロードすると、画像は250px（167px）にサイズが変更され、何らかの理由で正しく切り取られません。私は間違って何をしていますか？

Answer 1

この行は：

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

...冗長と思われる、それは原画像の比例サイズ変更を引き起こすことができる。それは、幅が正しいのはなぜだが、高さではない理由を説明するだろう（幅が広いよりも、逆の画像を見るだろう）。

$image->cropImage(...)コールが必要なようです。

更新：

Imagick::cropImage functionがトリミング領域と左上隅のX/Yの幅と高さをとります。代わりに、あなたはxValueとyValueが何であるかに応じて、イメージキャンバスの境界を越える基本的に裁ち矩形を選択しています。フルイメージの幅/高さです。