ASP.NET Ajax实现图片剪裁

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( ASP.NET Ajax实现图片剪裁

)
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         
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样式表

然后我们需要添加调用JCrop的代码来实现图片的剪裁

这个代码都很简单。JCrop处理id为cropbox的img中的图片。在onSelect事件中添加函数showCoords来记录用户选中图片区域的数据。
并在剪裁按钮的点击事件中实现Ajax的功能，将后台处理好的图片显示在页面上。

所需的命名空间

using System;
2 ASP.NET Ajax实现图片剪裁

using System.Web;
3 ASP.NET Ajax实现图片剪裁

using System.Web.Services;

为什么要用System.Web.Services这个命名空间呢，因为我们用JQuery调用后台代码时用的是后台的页面方法

[WebMethod]
2 ASP.NET Ajax实现图片剪裁

public static string CroppedImage(int pPartStartPointX, int pPartStartPointY, int pPartWidth, int pPartHeight)
3 }

前面提到过用户控件，上传图片并记录图片的存放路径。存放图片路径主要通过类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>

后台代码

using System;
2 ASP.NET Ajax实现图片剪裁

using System.Web.UI.HtmlControls;
3 ASP.NET Ajax实现图片剪裁

public partial class Controls_ImageUpload : System.Web.UI.UserControl
5

XmlHelper类中用到的主要方法

public void StoreImagePath(string img)
2 }

之后就是一个很重要的方法了。剪裁图片的方法，放在ImageHelper类中。

public static string CropImage(string originamImgPath, string imgPath, int width, int height, int x, int y)
2 }

看下效果，demo阶段先不做优化了。
开始
ASP.NET Ajax实现图片剪裁

显示上传的图片

图片剪裁

就写到这里了，希望这篇对大家有帮助！