- 浏览: 61664 次
- 性别:
- 来自: 广州
最新评论
实现这个功能主要用到了JQuery和基于JQuery的图片处理插件JCrop。
JQuery可以下载下来,或者在代码中这样引用<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>。
JCrop需要下载,其中还包括相应的一些例子可以作为参考。
这个例子有三部分功能,一、图片上传,二、现实用户上传上来的图片,三、图片剪裁。
主要的流程是:用户上传图片,显示图片,在用户点击剪裁按钮之后,用ajax的方式显示剪裁之后的图片。
上传图片就用的ASP.NET自带的文件上传控件,整个文件上传功能放在一个用户空间里面。
每次用户上传了图片以后,文件存放的位置持久化在一个xml文件中。
在用JCrop实现剪裁功能的时候,需要在页面中添加一些隐藏域来
存储图片剪裁中用到的坐标和宽高等数据。剪裁则用JQuery的Ajax功能实现。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Pages_Default" %>
2
3 <%@ Register Src="../Controls/ImageUpload.ascx" TagName="ImageUpload" TagPrefix="uc1" %>
4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8
9 <script src="../Scripts/jquery.min.js" type="text/javascript"></script>
10
11 <script src="../Scripts/jquery.Jcrop.js" type="text/javascript"></script>
12
13 <link href="../Style/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
14 <link href="../Style/demos.css" rel="stylesheet" type="text/css" />
15
16 <script type="text/javascript" language="Javascript">
17
18 // Remember to invoke within jQuery(window).load()
19 // If you don't, Jcrop may not initialize properly
20 jQuery(document).ready(function() {
21
22 jQuery('#cropbox').Jcrop({
23 //onChange: showCoords,
24 onSelect: showCoords
25 });
26
27 });
28
29 function onCropClick() {
30
31 //alert("{ pPartStartPointX: '" + $('#x').val() + "', pPartStartPointY: '" + $('#y').val() + "', pPartWidth: '" + $('#w').val() + "', pPartHeight: '" + $('#h').val() + "'}");
32 $.ajax({
33 type: "POST",
34 contentType: "application/json; charset=utf-8",
35 data: "{ pPartStartPointX: '" + $('#x').val() + "', pPartStartPointY: '" + $('#y').val() + "', pPartWidth: '" + $('#w').val() + "', pPartHeight: '" + $('#h').val() + "'}",
36 url: "Default.aspx/CroppedImage",
37 dataType: "json",
38 success: function(data) {
39 //alert(data.d);
40 //$("#CustomerDetails").html(data);
41 $('#disp').html("<img src='" + data.d + "' alt='' />");
42 }
43 });
44 }
45
46 // Our simple event handler, called from onChange and onSelect
47 // event handlers, as per the Jcrop invocation above
48 function showCoords(c) {
49 jQuery('#x').val(c.x);
50 jQuery('#y').val(c.y);
51 //jQuery('#x2').val(c.x2);
52 //jQuery('#y2').val(c.y2);
53 jQuery('#w').val(c.w);
54 jQuery('#h').val(c.h);
55 };
56
57 </script>
58
59 </head>
60 <body>
61 <form id="form1" runat="server">
62 <div>
63 <!-- This is the image we're attaching Jcrop to -->
64 <img runat="server" id="cropbox" />
65 <input type="button" id="btnCrop" value=" Crop Image " onclick="onCropClick();" />
66 <div id="disp">
67 </div>
68 <label>
69 <%--X1--%>
70 <input type="hidden" size="4" id="x" name="x" /></label>
71 <label>
72 <%--Y1--%>
73 <input type="hidden" size="4" id="y" name="y" /></label>
74 <label>
75 <%--X2--%>
76 <input type="hidden" size="4" id="x2" name="x2" /></label>
77 <label>
78 <%--Y2--%>
79 <input type="hidden" size="4" id="y2" name="y2" /></label>
80 <label>
81 <%--W--%>
82 <input type="hidden" size="4" id="w" name="w" /></label>
83 <label>
84 <%--H--%>
85 <input type="hidden" size="4" id="h" name="h" /></label>
86 <uc1:ImageUpload ID="ImageUpload1" runat="server" />
87 </div>
88 </form>
89 </body>
90 </html>
注意在页面代码中添加需要的javascript和css样式表
1<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
2<script src="../Scripts/jquery.Jcrop.js" type="text/javascript"></script>
3<link href="../Style/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
4<link href="../Style/demos.css" rel="stylesheet" type="text/css" />
然后我们需要添加调用JCrop的代码来实现图片的剪裁
1 <script type="text/javascript" language="Javascript">
2
3 jQuery(document).ready(function() {
4
5 jQuery('#cropbox').Jcrop({
6 onSelect: showCoords
7 });
8 });
9
10 function onCropClick() {
11
12 $.ajax({
13 type: "POST",
14 contentType: "application/json; charset=utf-8",
15 data: "{ pPartStartPointX: '" + $('#x').val() + "', pPartStartPointY: '" + $('#y').val() + "', pPartWidth: '" + $('#w').val() + "', pPartHeight: '" + $('#h').val() + "'}",
16 url: "Default.aspx/CroppedImage",
17 dataType: "json",
18 success: function(data) {
19 $('#disp').html("<img src='" + data.d + "' alt='' />");
20 }
21 });
22 }
23
24 function showCoords(c) {
25 jQuery('#x').val(c.x);
26 jQuery('#y').val(c.y);
27 jQuery('#w').val(c.w);
28 jQuery('#h').val(c.h);
29 };
30
31 </script>
这个代码都很简单。JCrop处理id为cropbox的img中的图片。在onSelect事件中添加函数showCoords来记录用户选中图片区域的数据。
并在剪裁按钮的点击事件中实现Ajax的功能,将后台处理好的图片显示在页面上。
所需的命名空间
1using System;
2using System.Web;
3using System.Web.Services;
为什么要用System.Web.Services这个命名空间呢,因为我们用JQuery调用后台代码时用的是后台的页面方法
1 [WebMethod]
2 public static string CroppedImage(int pPartStartPointX, int pPartStartPointY, int pPartWidth, int pPartHeight)
3 {
4 XmlHelper xmlHelper = new XmlHelper();
5 xmlHelper.XmlPath = HttpContext.Current.Server.MapPath("~/App_Data/ImagePaths.xml");
6 string originalPath = xmlHelper.GetImagepath();
7 string savePath = HttpContext.Current.Server.MapPath("~/Images/CropImg/");
8 string filename = ImageHelper.CropImage(originalPath, savePath, pPartWidth, pPartHeight, pPartStartPointX, pPartStartPointY);
9
10 string fullpath = "../Images/CropImg/" + filename;
11 return fullpath;
12 }
前面提到过用户控件,上传图片并记录图片的存放路径。存放图片路径主要通过类XmlHelper来实现。
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageUpload.ascx.cs" Inherits="Controls_ImageUpload" %>
<%--<asp:PlaceHolder ID="imageContainer" runat="server"></asp:PlaceHolder>--%>
<table>
<tr>
<td>
<asp:FileUpload ID="imgUpload" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnUpload" runat="server" Text=" Up Load "
onclick="btnUpload_Click" />
</td>
</tr>
</table>
后台代码
1using System;
2using System.Web.UI.HtmlControls;
3
4public partial class Controls_ImageUpload : System.Web.UI.UserControl
5{
6 private readonly string IMG_PATH = "~/Images/Upload/";
7 private XmlHelper _xmlHelper = new XmlHelper();
8
9 /// <summary>
10 /// Name of a control to operate
11 /// </summary>
12 public string ControlName { get; set; }
13
14 protected void Page_Load(object sender, EventArgs e)
15 {
16 if (!IsPostBack)
17 {
18 SetPathInfo();
19 }
20 }
21
22 protected void btnUpload_Click(object sender, EventArgs e)
23 {
24 try
25 {
26 // Specify the path on the server to
27 // save the uploaded file to.
28 String savePath = Server.MapPath(IMG_PATH);
29
30 // Before attempting to perform operations
31 // on the file, verify that the FileUpload
32 // control contains a file.
33 if (imgUpload.HasFile)
34 {
35 // Get the name of the file to upload.
36 String fileName = imgUpload.FileName;
37
38 // Append the name of the file to upload to the path.
39 savePath += fileName;
40
41 // Call the SaveAs method to save the
42 // uploaded file to the specified path.
43 // This example does not perform all
44 // the necessary error checking.
45 // If a file with the same name
46 // already exists in the specified path,
47 // the uploaded file overwrites it.
48 imgUpload.SaveAs(savePath);
49
50 _xmlHelper.XmlPath = Server.MapPath("~/App_Data/ImagePaths.xml");
51 _xmlHelper.StoreImagePath(savePath);
52
53 SetPathInfo();
54 }
55 }
56 catch (Exception)
57 {
58 this.Page.ClientScript.RegisterStartupScript(this.GetType(), "", "alert('Image can not be uploaded, please check!'", true);
59 }
60 }
61
62
63 private void SetPathInfo()
64 {
65 string serverPath = "~/Images/Upload/";
66
67 XmlHelper xmlHelper = new XmlHelper();
68 xmlHelper.XmlPath = Server.MapPath("~/App_Data/ImagePaths.xml");
69 string imgPath = xmlHelper.GetImagepath();
70 string filename = GetFileName(imgPath);
71
72 serverPath += filename;
73
74 HtmlImage cropbox = (HtmlImage)Parent.FindControl("cropbox");
75 if (cropbox != null)
76 cropbox.Src = serverPath;
77 HtmlImage preview = (HtmlImage)Parent.FindControl("preview");
78 if (preview != null)
79 preview.Src = serverPath;
80
81 Context.Items["imgsrc"] = serverPath;
82 }
83
84 private string GetFileName(string fullname)
85 {
86 // Validation of string is not implemented temperarily
87 int index = fullname.LastIndexOf("\\");
88 string filename = fullname.Substring(index + 1);
89
90 return filename;
91 }
92}
93
XmlHelper类中用到的主要方法
1public void StoreImagePath(string img)
2 {
3 try
4 {
5 if (_xdoc == null)
6 {
7 _xdoc = XDocument.Load(XmlPath);
8 }
9
10 _xdoc.Root.Descendants().Remove();
11 _xdoc.Root.Add(new XElement("path", img));
12 _xdoc.Save(this.XmlPath);
13 }
14 catch
15 {
16 throw new Exception("Error occured in adding image path.");
17 }
18 }
19
20 public string GetImagepath()
21 {
22 string imagePath = string.Empty;
23
24 try
25 {
26 if (_xdoc == null)
27 {
28 _xdoc = XDocument.Load(XmlPath);
29 }
30
31 imagePath = _xdoc.Root.Descendants().First().Value.ToString();
32 }
33 catch
34 {
35 throw new Exception("Error occured in getting image path.");
36 }
37
38 return imagePath;
39 }
之后就是一个很重要的方法了。剪裁图片的方法,放在ImageHelper类中。
1public static string CropImage(string originamImgPath, string imgPath, int width, int height, int x, int y)
2 {
3 string filename = DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg";
4 byte[] CropImage = Crop(originamImgPath, width, height, x, y);
5 using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
6 {
7 ms.Write(CropImage, 0, CropImage.Length);
8 using (System.Drawing.Image CroppedImage = System.Drawing.Image.FromStream(ms, true))
9 {
10 string SaveTo = imgPath + filename;
11 CroppedImage.Save(SaveTo, CroppedImage.RawFormat);
12 }
13 }
14
15 return filename;
16 }
17
18 private static byte[] Crop(string Img, int Width, int Height, int X, int Y)
19 {
20 try
21 {
22 using (Image OriginalImage = Image.FromFile(Img))
23 {
24 using (Bitmap bmp = new Bitmap(Width, Height, OriginalImage.PixelFormat))
25 {
26 bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
27 using (Graphics Graphic = Graphics.FromImage(bmp))
28 {
29 Graphic.SmoothingMode = SmoothingMode.AntiAlias;
30 Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
31 Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
32 Graphic.DrawImage(OriginalImage, new Rectangle(0, 0, Width, Height), X, Y, Width, Height, GraphicsUnit.Pixel);
33 MemoryStream ms = new MemoryStream();
34 bmp.Save(ms, OriginalImage.RawFormat);
35 return ms.GetBuffer();
36 }
37 }
38 }
39 }
40 catch (Exception Ex)
41 {
42 throw (Ex);
43 }
44 }
看下效果,demo阶段先不做优化了。
开始
显示上传的图片
图片剪裁
发表评论
-
检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法
2012-08-06 16:49 1062window7或windows server 2008运行as ... -
web.config详解之在文件中配置网站默认页面
2012-08-01 10:26 1011在<configuration></conf ... -
ASP.NET将XML数据转换成DataTable
2012-07-27 17:42 1159/// <summary> /// ... -
ffmpeg.exe
2012-07-25 19:40 1289ffmpeg.exe是一个源于Linux的工具软件,是FLV视 ... -
总结C#哈希表的用法
2012-07-24 14:19 942C#哈希表,可能对于很多同行来说已经很熟悉.刚开始接触时有点陌 ... -
html option的onclick 事件
2012-07-19 11:44 1273对于select 的onclick事件,ie支持在select ... -
关于在IE下对Select标签设置innerHTML无效的问题 (转)
2012-07-17 13:40 1151关于在IE下对Select标签设置innerHTML无效的问题 ... -
鼠标单击文本框里面的内容全选的实现-JavaScript
2012-07-09 09:11 976我的新浪博客:<script type="te ... -
js 动态添加 复制 删除 相同div层
2012-07-05 00:02 1999<!DOCTYPE html PUBLIC " ... -
[JS]Cookie精通之路
2012-06-24 23:08 810<!—Cookies,有些人喜欢它们,有些人憎恨它们。但 ... -
JavaScript使用cookie,参数设置,说明;读取,写入,删除函数
2012-06-24 23:07 777cookie概述 在上一节,曾 ... -
JS动态添加表格行 (转)
2012-06-24 14:55 874表格部分代码如下: <table id="t ... -
js 控制表格
2012-06-24 14:51 880<!DOCTYPE html PUBLIC " ... -
ajax交互只能运行一次
2012-06-24 14:36 725问题:点击按钮提交AJAX时,第一次可以运行,但是第二次就直接 ... -
调试时出现错误提示:无法直接启动带有 "类库输出类型 "的项目
2012-06-14 09:14 697把项目中带有Main函数的项目设置为启动。 -
ASP.NET 快捷键
2012-06-12 16:20 872VS2005,VS2008 快捷键大全 Ctrl+E,D ... -
用fileUpload上传flv格式问件解决方法
2012-05-31 18:01 1077用fileUpload上传视频文件就出现找不到服务器错误,或者 ... -
网页中插入视频播放代码全集
2012-05-24 12:14 8431.avi格式 代码片断如下: <object id ... -
ConnectionString 属性尚未初始化
2012-05-10 12:19 1250异常详细信息: System.InvalidOperation ... -
C# MD5加密最简单方法
2012-05-03 17:19 970.net 有一个最简单实现MD5的方法 /**//**//** ...
相关推荐
用户头像裁切功能,用到了JQuery 1.2,源码包中含有两个版本,其中一个是通用版,另一个是专为VS2005开发的朋友准备的。...本程序裁切图片后可以保存,裁切过程中可以显示图片相关位置信息,总体来说很不错。
ajax+js+asp+aspjpeg实现剪切图片、拖拽图片、缩放图片、裁切图片 主要功能: 加载服务器上的图片,用户可以自定义图片的大小,拖拽,缩放,裁切,预览等效果! 可以作为自定义头像功能使用! 备注:在这里我要向...
ASP.Net C# AJax 图片剪载上传,上传用传统方式,裁剪有两种方式,其中之一是运用ajax。资料太老,不建议看
ZoomImageDemoASP.NET运用AJAX头像图片裁切(仿开心网)用户头像裁切功能,用到了JQuery 1.2,源码包中含有两个版本,其中一个是通用版,另一个是专为VS2005开发的朋友准备的。至于图片裁切功能现在很流行,很多大...
ASP.NET 实现的用uploadify(uploadify-v2.1.4)上传图片,然后用jcrop裁剪需要的区域,然后上传到服务器中。 完整DEMO,放心下载。 浏览器兼容性没怎么测试,在chrome下没问题
这是个与AJAX有关的很不错的实用小程序,ASP.NET+JavaScript实现图片切割, 也就是大家所说的裁切功能,并可以用鼠标拖动区域、拉大区域, 右侧会适时显示出裁切后的图片, 点击保存后可将图片按原来的文件名保存, ...
ASP.NET相册控件(含源码) PhotoAlbum 功能列表: 1.无须数据库支持,直接处理服务器图片目录 2.为大图片生成缩略图,并存放到专门的目录,提高相册预览图片的效率 3.简化图片添加过程,直接上传图片到图片目录...
内容索引:.NET源码,Ajax相关,jQuery,图片裁切 jQuery+在线裁剪图片,研究一下吧,现在的热门技术。
Helper为图片处理类, 包括图片翻转(RotateImage()), 图片裁剪(GenerateBitmap())。 Callback为服务器端图片处理类, 通过使用Cutter封装客户端AJAX提交的数据, 然后调用Helper中的方法来完成图片处理。 ...
的asp.net实例,简单好学,是本人项目中的实例,看了网上写的太麻烦,自己写的。 Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。 特点: 对所有图片均unobtrusively(无侵入的,保持...
结合jquery插件实现无刷新上传头像文件,并实现图片剪裁,可以完美上传图片,上传后显示裁切框,右上角的小窗口可预览裁切后的效果,粗略运行了下,可以跑起来,环境。 运行环境:
ajax+asp.net实现无刷新上传,在线裁剪图片,自动生成缩略图,兼容主流浏览器兼容。 前端使用jquery、jquery.bitmapcutter、ajaxupload.3.5等纯JS脚本,保证兼容性好及无需安装插件
实例529 仿开心网实现图片在线裁剪(结合 jQuery) 801 20.3 图片存取技术的应用 804 实例530 将上传的相册照片存储到数据库中 804 实例531 读取数据库中上传的相册照片并显示 806 实例532 将个人头像以二进制流形式...
首先使用cropper.js插件,能够将剪裁后的图片返回为base64编码,后台根据base64编码解析保存图片。很使用的例子,适合图片剪裁上传
15.强大的在线图片编辑功能(缩放,旋转,水印,裁剪)。 16.类似Windows中的图片缩略图预览模式,方便查看图片。 17.注册用户有二级域名空间可以让访客随时访问自己的空间进行文件浏览下载。 18.访客可在外部空间处...
15.强大的在线图片编辑功能(缩放,旋转,水印,裁剪)。 16.类似Windows中的图片缩略图预览模式,方便查看图片。 17.注册用户有二级域名空间可以让访客随时访问自己的空间进行文件浏览下载。 18.访客可在外部空间处...
非常丰富且响应迅速的用户界面(ASP.NET MVCAwesome jQuery的ajax助手) 上传并裁剪图片餐(使用Jcrop) 映射实体视图模型(使用ValueInjecter) 多语言用户界面 N层架构 使用窗体身份验证的安全性 分页使用“结果”...
强大的在线图片编辑功能(缩放,旋转,水印,裁剪)。 16.类似Windows中的图片缩略图预览模式,方便查看图片。 17.注册用户有二级域名空间可以让访客随时访问自己的空间进行文件浏览下载。 18.访客可在外部...
15.强大的在线图片编辑功能(缩放,旋转,水印,裁剪)。 16.类似Windows中的图片缩略图预览模式,方便查看图片。 17.注册用户有二级域名空间可以让访客随时访问自己的空间进行文件浏览下载。 18.访客可在外部空间...