MVC Post Cropped Image to Controller

时间:2015-02-02 06:11:46

标签: javascript jquery asp.net-mvc model-view-controller

我在Mvc 5项目中使用了cropit脚本(https://github.com/scottcheng/cropit)。 我的观点:

<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>
}

当我输入图像(例如1000x1000)并使用导出按钮发送我的表单时,图像将发送到“Img”文件夹但没有裁剪。通常是cropit脚本演示:http://scottcheng.github.io/cropit/

我的控制器:

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

0 个答案:

没有答案