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

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

更新

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

    //...
}

Jcrop没有在asp.net mvc中正确裁剪图像

1 个答案: