ASP.NET Ajax实现图片剪裁
2009-08-25 01:10
399 查看
ASP.NET Ajax实现图片剪裁
-
实现这个功能主要用到了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的代码来实现图片的剪裁
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)
3using System;
2using System.Web.UI.HtmlControls;
3
4public partial class Controls_ImageUpload : System.Web.UI.UserControl
5
XmlHelper类中用到的主要方法
1public void StoreImagePath(string img)
2
20 public string GetImagepath()
21public static string CropImage(string originamImgPath, string imgPath, int width, int height, int x, int y)
2
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阶段先不做优化了。
开始
显示上传的图片
图片剪裁
就写到这里了，希望这篇对大家有帮助！
-
实现这个功能主要用到了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的代码来实现图片的剪裁
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)
3using System;
2using System.Web.UI.HtmlControls;
3
4public partial class Controls_ImageUpload : System.Web.UI.UserControl
5
XmlHelper类中用到的主要方法
1public void StoreImagePath(string img)
2
20 public string GetImagepath()
21public static string CropImage(string originamImgPath, string imgPath, int width, int height, int x, int y)
2
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 Ajax实现图片剪裁
- asp.net+js+ajax实现手机移动端页面预览、剪裁、上传头像图片
- ASP.NET Ajax实现图片剪裁
- ASP.NET Ajax实现图片剪裁
- ASP.NET z中使用crop实现图片上传、剪裁和保存
- 使用Jcrop实现图片上传、剪裁和保存(ASP.NET)
- 使用Jcrop实现图片上传、剪裁和保存(ASP.NET)
- C# Asp.net使用FormData对象实现ajax提交表单及上传图片
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件） ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字， C# WinForm 中英文实现， 国际化实现的简单方法 ASP.NET Core 2 学习笔记（六）ASP.NET Core 2 学习笔记（三）
- 使用ASP.NET AJAX实现(图片)幻灯片效果
- 点击图片,AJAX删除后台图片文件的实现代码(asp.net)
- ASP.NET 与 Ajax 的实现方式
- ASP.NET实现投票结果的图片进度条显示代码
- Asp.Net Ajax+WCF Service+ADO.NET Entity Framework实现数据列表，数据筛选，分页，排序，删除
- Asp.net用ajax技术实现无刷新分页
- Asp.net + jQuery + jQuery pager plugin + Sql Server 利用Ajax实现真正的无刷新分页浏览
- 通过AJAX与ASP.NET结合实现的仿GridView增删改查功能！ 推荐
- ASP.NET AJAX UpdatePanel 控件实现剖析
- asp.net 图片的读写入库实现代码