Question

我正在使用[ValidateAntiForgeryToken] [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); img.Crop(Top, Left, Bottom, Right); 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" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "Error! Please provide valid information!")

    <input type="file" name="file" id="file01" style="width: 100%;" /><br />

    <img id="blah01" 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" />
}

查看

$(document).ready(function () {
    var img_left = 0;
    var img_top = 0;

    $("#blah01").load(function () {
        var imgCor = $("#blah01").position();
        img_left = imgCor.left;
        img_top = imgCor.top;
    });
    $("#cropper").draggable({
        containment: "#blah01", scroll: false,
        stop: function () {
            var getCor = $("#cropper").position();
            $("#Top").val(getCor.top - img_top);
            $("#Left").val(getCor.left - img_left);
            $("#Bottom").val(getCor.top - img_top + 200);
            $("#Right").val(getCor.left - img_left + 160);
        }
    });
});

JS

WebImage Crop()

我的代码中有什么问题吗？如何使用文本框中给定值的{{1}}函数裁剪图像？急需这个帮助！感谢。

Answer 1

你有一个错误在这一点上：

img.Crop(Top, Left, Bottom, Right);
img.Save(path, picExt);

Method Crop返回您尚未收集的WebImage对象。该对象是裁剪后的图像。所以做一个小小的改变：

var img_cropped=img.Crop(Top, Left, Bottom, Right);
img_cropped.Save(path, picExt);

这应该这样做。

这里的Java脚本存在问题

$("#Bottom").val(getCor.top - img_top + 200);
$("#Right").val(getCor.left - img_left + 160);

它只增加200px到顶部和160px到左边。它只是静止的。您可以在底部和右侧文本框中传递纯积分值进行测试。 C＃代码正在运行。我查了一下。

WebImage裁剪无法在asp.net mvc中工作

1 个答案: