Javascript MVC后裁剪图像到控制器

我在MVC5项目中使用cropit脚本（）。 我的看法是：

---

您应该将通过调用

export

方法获得的

imageData

提交到服务器，而不是提交到fileinput中选择的文件。如何使用jquery或razor将imageData提交到服务器（控制器）？与他们一样，您必须将其分配到隐藏字段，并在服务器端将其转换为字节[]。从代码看，它似乎导出到base64或datauri。首先识别它并根据需要进行转换。已编辑代码但存在空引用错误。一旦从文件输入切换到隐藏字段，您将无法接受

HttpPostedFileBase

，而是接受包含导出二进制数据的

字符串。插件的导出格式取决于您的调查。您必须手动将字符串转换为字节[]，然后将其保存到文件中。转换取决于格式，如果插件导出到base64，只需调用
Convert.FromBase64String
就足够了。
<script src="~/Scripts/Crop/jquery-2.0.0.min.js"></script>
<script src="~/Scripts/Crop/jquery.cropit.js"></script>
<link href="~/Scripts/Crop/crop.css" rel="stylesheet" />

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @enctype =     "multipart/form-data" }))
{
<div class="image-editor" style="margin-left:120px; margin-bottom:25px;">
    <input type="file" name="filex" class="cropit-image-input">
    <div class="cropit-image-preview"></div>
    <input type="range" class="cropit-image-zoom-input">
    <input type="hidden" name="image-data" class="hidden-image-data" />
    <button class="export">Export</button>
</div>

<script>
    $(function () {
        $('.image-editor').cropit({

        });

        $('.export').click(function () {
            var imageData = $('.image-editor').cropit('export');
            $('.hidden-image-data').val(imageData);
            //window.open(imageData);
        });
    });
</script>
}

    [HttpPost]
    public ActionResult Index(string files)
    {
        var dataurl = Request["image-data"];
        var data = dataurl.Substring(dataurl.IndexOf(",") + 1);
        var newfile = Convert.FromBase64String(data);

        var layoutfilename = Guid.NewGuid().ToString() + "_imgage.png";
        var dataFile = Server.MapPath(@"~/A/" + layoutfilename);
        System.IO.File.WriteAllBytes(dataFile, newfile);

        return View();
    }