如何用ASP.NET MVC结合JCrop实现图片上传和在线裁剪功能？

本文共计1478个文字，预计阅读时间需要6分钟。

JCrop用于裁剪图片，体验如下：上传图片，上传成功后跳转到编辑页面，使用JCrop裁剪图片并保存到指定文件夹。裁剪成功后，主视图页面显示裁剪结果。

JCrop用来裁剪图片，本篇想体验的是：

在视图页上传图片：

上传成功，跳转到另外一个编辑视图页，使用JCrop对该图片裁剪，并保存图片到指定文件夹：

裁剪成功后，在主视图页显示裁剪图片：

当然，实际项目中最有可能的做法是：在本页上传、裁剪并保存。

思路

• 在上传图片视图页，把图片上传保存到一个临时文件夹Upload
• 在编辑裁剪视图页，点击"裁剪"按钮，把JCrop能提供的参数，比如宽度、高度、离顶部距离，离底部距离，离左右端距离等封装成类，传递给控制器方法
• 控制器方法根据接收到的参数，对图片裁剪，把图片保存到目标文件夹ProfileImages，并删除掉临时文件夹Upload里对应的图片。

为了配合上传图片的主视图页，需要一个与之对应的View Model，其中包含图片路径的属性。