Jcrop未在asp.net中正確裁剪圖像mvc

Question

我使用asp.net mvc 4和Jcrop Jquery Plugin裁剪圖像，裁剪後我將裁剪後的圖像上傳到我的服務器。圖像上傳成功，但裁剪區域與客戶端選擇的內容不一致。這裏是我的代碼，

控制器

[HttpPost] 
public ActionResult AdminProfilePic(HttpPostedFileBase file, int Top, int Left, int Bottom, int Right) 
{ 
    if (file != null) 
    { 
     string picName = User.Identity.Name; 
     WebImage img = new WebImage(file.InputStream); 
     string picExt = Path.GetExtension(file.FileName); 
     if (picExt == ".jpg" || picExt == ".gif" || picExt == ".jpeg" || picExt == ".png") 
     { 
      picExt = "PNG"; 
      string path = System.IO.Path.Combine(Server.MapPath("~/Images/Owners/"), picName); 

      var img_cropped = img.Crop(Top, Left, Bottom, Right).Resize(160, 200, false, true); 
      img_cropped.Save(path, picExt); 
      img.Save(path, picExt); 
      TempData["pp_success"] = "Your profile picture has been updated successfully!"; 
      return RedirectToAction("AdminProfilePic"); 
     } 
     else 
     { 
      TempData["pp_fail"] = "Error! Please upload a valid image file only!"; 
      return RedirectToAction("AdminProfilePic"); 
     } 
    } 
    else 
    { 
     TempData["pp_fail"] = "Error! No File was selected!"; 
     return RedirectToAction("AdminProfilePic"); 
    } 
} 

查看

@using (Html.BeginForm("AdminProfilePic", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    <input type="file" name="file" id="file01" style="width: 100%;" /><br /> 

    <img id="blah01" style="height: 350px;" class="img-responsive" src="#" alt="your image" /><div id="cropper"></div> 
    @Html.TextBox("Top", null, new { id = "Top" })<br /> 
    @Html.TextBox("Left", null, new { id = "Left" })<br /> 
    @Html.TextBox("Bottom", null, new { id = "Bottom" })<br /> 
    @Html.TextBox("Right", null, new { id = "Right" })<br /> 
    <input type="submit" class="btn btn-success" value="Update Profile Picture" /> 
} 

JS

$(document).ready(function() { 
    function showCoords(c) { 
     $("#Top").val(c.x); 
     $("#Left").val(c.y); 
     $("#Bottom").val(c.x2); 
     $("#Right").val(c.y2); 
    } 
    $('#blah01').Jcrop({ 
     onSelect: showCoords, 
     bgColor: 'black', 
     bgOpacity: .4, 
     maxSize: [160, 200] 
    }); 
}); 

也許我ñ不能得到準確的結果，因爲上傳時實際圖像大小保持不變，並且視圖中圖像的大小將不計入。因此，選定的裁剪區域座標實際上取決於實際圖像，而不是視圖中給出的圖像。我嘗試了很多，但找不到解決此問題的任何解決方案。如何根據視圖中圖像的大小獲取準確的裁剪圖像？嚴重需要這個幫助！謝謝。

UPDATE

按庫爾頓的建議，我在我的控制器中添加這些代碼，

var myW = img.Width; 
var myH = img.Height; 
var Top = y; 
var Left = x; 
var Bottom = myH - y2; 
var Right = myW - x2; 
var img_cropped = img.Crop(Top, Left, Bottom, Right).Resize(160, 200, false, true); 

截圖

左邊是上傳後的更新圖像，並且右側是種植部分。

Answer 1

的WebImage方法Crop()預計值top, left, bottom, right。

According to the documentation這些數值代表有多少像素從上，左，下，右，而你正在傳遞是具有基於該計算出精確的X，Y，X2和Y2座標刪除圖像，它是從圖像左上角開始測量的像素數量。

他們不是一回事，這就是爲什麼你遇到奇怪的剪裁行爲。

我不知道WebImage是否具有您從JCrop獲得的值的方法。我個人使用ImageProcessor裁剪圖像，這有一個修剪方法，接受top, left, width, height而不是。

我想有可能得到圖像的寬度和高度，並執行計算以將您擁有的信息轉換爲要從頂部，左側，底部和右側移除的像素數。

下面是一個比特的代碼，我已經爲了從x, y, x2, y2執行值的計算，以像素的數量，以從所述top, left, bottom, right除去扔在一起：

public ActionResult AdminProfilePic(HttpPostedFileBase file, int x, int y, int x2, int y2) 
{ 
    var img = new WebImage(file.InputStream); 

    // Get the image height and width 
    var width = img.Width; 
    var height = img.Height; 

    // Calculate the cropping values 
    var top = y; 
    var left = x; 
    var bottom = height - y2; 
    var right = width - x2; 

    // Do the crop 
    var img_cropped = img.Crop(top, left, bottom, right).Resize(160, 200, false, true); 

    //... 
}