Jcrop 在 asp.net mvc 中无法正确裁剪图像

Question

我正在使用 Asp.net MVC 4 和 Jcrop jQuery 插件来裁剪图像，裁剪后，我将裁剪后的图像上传到我的服务器。图片上传成功，但裁剪区域与客户端选择的不准确。

这是我的代码：

控制器

[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]
    });
});

可能我没有得到准确的结果，因为上传时实际图像大小保持不变，并且视图中图像的大小不计算在内。所以选择的裁剪区域坐标实际上取决于真实图像而不是视图中给出的图像。我已经尝试了很多，但找不到任何解决方案来解决这个问题。如何根据视图中图像的大小获得准确的裁剪图像？

更新

根据 Coulton 的建议，我在控制器中添加了这些代码：

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);

    //...
}