圖像沒有裁剪或調整大小

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是什麼，你基本上選擇了超出圖像畫布邊界的裁剪矩形。