WebImage crop not working as expected in asp.net mvc

I’m using Asp.net mvc 4 to make a website where user can crop the image before uploading but for some reason it’s not cropping. Here are my codes,

Controller

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

View

@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" />
}

JS

$(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);
        }
    });
});

Is there something wrong in my code? How can I crop the image using WebImage Crop() function by the given values in textboxes?

Answer

You have a mistake At this point:

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

The Method Crop returns a WebImage object which you have not collected. That Object is the cropped image. So make this small change:

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

This Should do it.

The Java script here is having problem

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

Its just adding 200px to top and 160px to left. Its just static. You can just pass plain integral values in the bottom and right textboxes to test. The C# Code is working. I checked it.