Asp.net MVC 实现图片上传剪切
时间: 2023-08-05 08:17:57 浏览: 53
要实现图片上传剪切,可以按照以下步骤进行:
1. 在视图中添加一个上传文件的表单。
2. 在控制器中编写代码,用于将上传的文件保存到服务器上。
3. 引入图片剪切插件,例如Jcrop。
4. 在视图中引入Jcrop插件,并使用JavaScript代码初始化插件。
5. 当用户完成剪切操作后,将剪切后的图片上传到服务器上。
以下是ASP.NET MVC实现图片上传剪切的示例代码:
在视图中添加上传文件的表单:
```
@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="file" />
<input type="submit" value="Upload" />
}
```
在控制器中编写代码,用于将上传的文件保存到服务器上:
```
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/Uploads"), fileName);
file.SaveAs(path);
}
return RedirectToAction("Crop");
}
```
在视图中引入Jcrop插件,并使用JavaScript代码初始化插件:
```
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<link href="//cdn.bootcss.com/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" rel="stylesheet" />
<script src="//cdn.bootcss.com/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"></script>
<script>
$(function () {
$('#cropImage').Jcrop({
aspectRatio: 1,
setSelect: [0, 0, 200, 200],
onSelect: function (c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
});
});
</script>
```
当用户完成剪切操作后,将剪切后的图片上传到服务器上:
```
[HttpPost]
public ActionResult Crop(int x, int y, int w, int h)
{
var fileName = "crop_" + Guid.NewGuid() + ".jpg";
var sourcePath = Path.Combine(Server.MapPath("~/App_Data/Uploads"), "original.jpg");
var destPath = Path.Combine(Server.MapPath("~/App_Data/Uploads"), fileName);
using (var image = Image.FromFile(sourcePath))
using (var cropped = new Bitmap(w, h))
using (var graphics = Graphics.FromImage(cropped))
{
graphics.DrawImage(image, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
cropped.Save(destPath, ImageFormat.Jpeg);
}
ViewBag.ImageUrl = Url.Content("~/App_Data/Uploads/" + fileName);
return View();
}
```
注意:以上代码仅供参考,具体实现可能需要根据实际需求进行调整。