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