Asp.Net平台下的图片在线裁剪功能的实现

最近项目中有个图片在线裁剪功能,本人查找资料,方法如下:前台展现用jquery.Jcrop实现,后台使用System.Drawing.Image类来进行裁剪.

1.前台展现实现

网上找到这个jquery.Jcrop,稍看了下,发现它提供的效果完全能满足项目需求.

官方网址:http://deepliquid.com/content/Jcrop.html,感兴趣的朋友可去看看.

页面先引用相关样式和脚本:

       <link href="Styles/jquery.Jcrop.css" rel="stylesheet" type="text/css" />

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>

页面body部分代码:

       <asp:Label ID="Label1" Text="原始图片" runat="server"></asp:Label><br />

        <asp:Image ID="target" runat="server" />

        <br />

        <asp:Label ID="Label2" runat="server" Text="最终显示效果"></asp:Label>

        <div id="preImg" style="width: 150px; height: 80px; overflow: hidden;">

            <asp:Image ID="preview" alt="Preview" runat="server" />

        </div>

其中ID为preImg的Style的width和height的值是裁剪图片的尺寸,而且要定义这个DIV的overflow:hidden.能够及时看到图片的裁剪效果的关键CSS属性就是它了.

接下来讲讲jquery.Jcrop.js的基本用法,及相关javascript的实现.

首先定义一些临时变量,来保存相关参数

         var jcrop_api, boundx, boundy;

然后给图片的DOM元素绑定Jcrop功能,相关的方法属性看英文就能明白其中的意思.

$('#target').Jcrop({

                   onChange: updatePreview,

                   onSelect: updatePreview,

                   onRelease: clearCoords,

                   aspectRatio: 150 / 80,

                   minSize: _minarray,

                   setSelect: _array

               }, function () {         

                   var bounds = this.getBounds();

                   boundx = bounds[0];

                   boundy = bounds[1];

                    jcrop_api = this;

               });

//此方法是用来及时展现图片裁剪效果