JCrop用来裁剪图片,本篇想体验的是:

在视图页上传图片:

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

裁剪成功后,在主视图页显示裁剪图片:

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

□ 思路

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

为了配合上传图片的主视图页,需要一个与之对应的View Model,其中包含图片路径的属性。而这个图片路径属性不是简单的字段显示编辑,当主视图页的View Model被传递到图片编辑、裁剪视图页后,根据JScrop特点,肯定有针对图片的裁剪和预览区域,所以,我们需要针对主视图页View Model的路径属性使用UIHint特性,为该属性定制显示和编辑视图。主视图页的View Model为:

using System.ComponentModel.DataAnnotations;

namespace MvcApplication1.Models
{
public class ProfileViewModel
{
[UIHint("ProfileImage")]
public string ImageUrl { get; set; }
}
}

在图片编辑、裁剪视图页,对应的View Model不仅有主视图页的View Model作为它的属性,还有与JCrop相关的属性,这些属性无需显示,只需要以隐藏域的方式存在着,通过JCrop的事件,把JCrop参数赋值给这些隐藏域。对应的View Model为:

using System.Web.Mvc;

namespace MvcApplication1.Models
{
public class EditorInputModel
{
public ProfileViewModel Profile { get; set; }
[HiddenInput]
public double Top { get; set; }
[HiddenInput]
public double Bottom { get; set; }
[HiddenInput]
public double Left { get; set; }
[HiddenInput]
public double Right { get; set; }
[HiddenInput]
public double Width { get; set; }
[HiddenInput]
public double Height { get; set; }
}
}

在上传图片的主视图页中,需要引入Microsoft.Web.Helpers(通过NuGet),使用该命名空间下的FileUpload帮我们生成上传元素。

@using Microsoft.Web.Helpers
@model MvcApplication1.Models.ProfileViewModel @{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
} <h2>Index</h2>
@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new {@encType = "multipart/form-data"}))
{
@Html.DisplayFor(x => x.ImageUrl)<br/>
@FileUpload.GetHtml(initialNumberOfFiles:1,includeFormTag:false, uploadText:"上传图片")<br/>
<input type="submit" name="submit" text="上传" />
}

在HomeController中:

action方法Upload用来接收来自主视图的View Model,把图片保存到临时文件夹Upload中,并把主视图的View Model赋值给编辑、裁剪视图中View Model的属性。

还需要引入System.Web.Helpers组件,该组件WebImage类,提供了针对上传图片处理的一些API。

action方Edit接收来自编辑、裁剪视图中View Model,根据参数,使用WebImage类的API对图片裁剪,保存到目标文件夹ProfileImages,并删除临时文件夹Upload中的相关图片。

using System.Web.Mvc;
using MvcApplication1.Models;
using System.Web.Helpers;
using System.IO; namespace MvcApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
} //如果图片上传成功就到裁剪页、即编辑页
[HttpPost]
public ActionResult Upload(ProfileViewModel model)
{
var image = WebImage.GetImageFromRequest(); //必须引用System.Web.Helpers程序集
if (image != null)
{
//限制图片的长度不能大于500像素
if (image.Width > 500)
{
image.Resize(500, ((500*image.Height)/image.Width));
} //根据图片的名称获取相对路径
var filename = Path.GetFileName(image.FileName);
//保存图片到指定文件夹
image.Save(Path.Combine("~/Upload/", filename)); //获取图片的绝对路径
filename = Path.Combine("../Upload/", filename);
model.ImageUrl = Url.Content(filename); var editModel = new EditorInputModel()
{
Profile = model,
Width = image.Width,
Height = image.Height,
Top = image.Height * 0.1,
Left = image.Width * 0.9,
Right = image.Width * 0.9,
Bottom = image.Height * 0.9
};
return View("Editor", editModel);
}
return View("Index", model);
} //裁剪页 编辑页
[HttpPost]
public ActionResult Edit(EditorInputModel editor)
{
//var image = new WebImage("~/" + editor.Profile.ImageUrl);
var image = new WebImage(editor.Profile.ImageUrl);
var height = image.Height;
var width = image.Width; image.Crop((int) editor.Top, (int) editor.Left, (int) (height - editor.Bottom), (int) (width - editor.Right));
var originalFile = editor.Profile.ImageUrl;//图片原路径 editor.Profile.ImageUrl = Url.Content("~/ProfileImages/" + Path.GetFileName(image.FileName));
image.Resize(100, 100, true, false);
image.Save(@"~" + editor.Profile.ImageUrl); System.IO.File.Delete(Server.MapPath(originalFile)); //把在Upload中的上传图片删除掉
return View("Index", editor.Profile);
} }
}

在编辑、裁剪视图页,需要引用Jcrop对应的css和js文件。

@model MvcApplication1.Models.EditorInputModel

@{
ViewBag.Title = "Editor";
Layout = "~/Views/Shared/_Layout.cshtml";
} <h2>Editor</h2>
<link href="~/Content/jquery.Jcrop.css" rel="stylesheet" /> <div id="mainform">
@using (Html.BeginForm("Edit", "Home", FormMethod.Post))
{
@Html.EditorFor(x => x.Profile.ImageUrl)
@Html.HiddenFor(x => x.Left)
@Html.HiddenFor(x => x.Right)
@Html.HiddenFor(x => x.Top)
@Html.HiddenFor(x => x.Bottom)
@Html.HiddenFor(x => x.Profile.ImageUrl)
<input type="submit" name="action" value="裁剪"/>
}
</div> @section scripts
{
<script src="~/Scripts/jquery.Jcrop.js"></script>
<script type="text/javascript">
$(function() {
$('#profileImageEditor').Jcrop({
onChange: showPreview,
onSelect: showPreview,
setSelect: [@Model.Top, @Model.Left, @Model.Right, @Model.Bottom],
aspectRatio: 1
});
}); function showPreview(coords) {
if (parseInt(coords.w) > 0) {
$('#Top').val(coords.y);
$('#Left').val(coords.x);
$('#Bottom').val(coords.y2);
$('#Right').val(coords.x2); var width = @Model.Width;
var height = @Model.Height;
var rx = 100 / coords.w;
var ry = 100 / coords.h; $('#preview').css({
width: Math.round(rx * width) + 'px',
height: Math.round(ry * height) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
} }
</script>
}

既然为主视图View Model的ImageUrl打上了[UIHint("ProfileImage")]特性,这意味着必须有对应的自定义强类型视图。

public class ProfileViewModel
{
[UIHint("ProfileImage")]
public string ImageUrl { get; set; }
}

Views/Home/EditorTemplates/ProfileImage.cshtml,是针对ImageUrl属性的自定义编辑模版:

@model System.String
<div id="cropContainer">
<div id="cropPreview">
<img src="@(String.IsNullOrEmpty(Model) ? "" : Model)" id="preview" />
</div>
<div id="cropDisplay">
<img src="@(String.IsNullOrEmpty(Model) ? "" : Model)" id="profileImageEditor" />
</div>
</div>

Views/Home/DisplayTemplates/ProfileImage.cshtml,是针对ImageUrl属性的自定义显示模版:

@model System.String

<img src="@(String.IsNullOrEmpty(Model) ? "" : Model)" id="profileImage" />

参考资料:
http://blog.tallan.com/2011/02/04/using-mvc3-razor-helpers-and-jcrop-to-upload-and-crop-images/
http://www.schnieds.com/2011/07/image-upload-crop-and-resize-with.html
http://zootfroot.blogspot.com/2010/12/mvc-file-upload-using-uploadify-with.html

MVC使用JCrop上传、裁剪图片的更多相关文章

  1. Django使用cropbox包来上传裁剪图片

    1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...

  2. Spring4 MVC 多文件上传(图片并展示)

    开始需要在pom.xml加入几个jar,分别是 <dependency> <groupId>commons-fileupload</groupId> <art ...

  3. MVC 中Simditor上传本地图片

    1.引用样式和js文件 <link href="~/Content/scripts/plugins/simditor/css/simditor.css" rel=" ...

  4. ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

    我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...

  5. 基于Jcrop的图片上传裁剪加预览

    最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...

  6. KindEditor上传本地图片在ASP.NET MVC的配置

    http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...

  7. MVC&WebForm对照学习:文件上传(以图片为例)

    原文  http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页::  ::  ::  ::管理 5 Posts :: 0 ...

  8. MVC应用程序显示上传的图片

    MVC应用程序显示上传的图片 前两篇<MVC应用程序实现上传文件>http://www.cnblogs.com/insus/p/3590907.html和<MVC应用程序实现上传文件 ...

  9. 图片上传裁剪zyupload

    图片上传控件用的是zyupload控件,使用过程中遇到了一些问题,特别记录下来 上图是目前的使用效果,这个控件我是用js代码动态添加出来的 HTML代码: <div class="wi ...

随机推荐

  1. (五)动态SQL

    第一节:if条件 第二节:choose,when和otherwise条件 第三节:where条件 1.自动加上where: 2.如果where子句以and或者or开头,则自动删除第一个and或者or: ...

  2. sqlserver sp_spaceused用法

    sp_spaceused显示行数.保留的磁盘空间以及当前数据库中的表所使用的磁盘空间,或显示由整个数据库保留和使用的磁盘空间. 语法sp_spaceused [[@objname =] 'objnam ...

  3. 解决insert语句插入时,需要写列值的问题

    今天发现解决这个问题其实很简单,闲话不多谈,我直接附上语句 ) select @s = isnull(@s+',', '') + [name] from syscolumns where id = o ...

  4. sqlserver中的全局变量总结

    @@CONNECTIONS返回自上次启动 Microsoft? SQL Server? 以来连接或试图连接的次数.@@CPU_BUSY返回自上次启动 Microsoft? SQL Server? 以来 ...

  5. mybatis中多条件判断---choose when的用法

    <select id="getFunctionByPage" resultMap="FunctionRlt"> SELECT K.FUNCTION_ ...

  6. 【TensorFlow】一文弄懂CNN中的padding参数

    在深度学习的图像识别领域中,我们经常使用卷积神经网络CNN来对图像进行特征提取,当我们使用TensorFlow搭建自己的CNN时,一般会使用TensorFlow中的卷积函数和池化函数来对图像进行卷积和 ...

  7. USACO 4.3 Buy Low, Buy Lower

    Buy Low, Buy Lower The advice to "buy low" is half the formula to success in the stock mar ...

  8. Playrix Codescapes Cup (Codeforces Round #413, rated, Div. 1 + Div. 2) E - Aquarium decoration 贪心 + 平衡树

    E - Aquarium decoration 枚举两个人都喜欢的个数,就能得到单个喜欢的个数,然后用平衡树维护前k大的和. #include<bits/stdc++.h> #define ...

  9. 8-3 4Values Whose Sum is Zero 和为0的四个值

    给定四个n元素集合 ABCD   要求分别从中取一个元素 abcd   使得他们的合为0   问有多少中取法 map果然炸了 #include<bits/stdc++.h> using n ...

  10. 基于 Laravel 开发博客应用系列 —— 设置 Linux/Mac 本地开发环境

    1.不同 Linux 发行版本的区别 不同的 Linux 发行版本之间有一些细微区别,尤其是包管理器:CentOS 和 Fedora 使用 yum 作为包管理器,而Ubuntu 使用  apt,在 O ...