在Asp.Net平台下实现图片在线裁剪功能是一项结合了前端与后端技术的任务，主要涉及到了jQuery插件、HTML/CSS以及C#语言的应用。本文将深入解析如何利用jQuery的Jcrop插件和System.Drawing.Image类来实现这一功能。
### 前台展示：jQuery.Jcrop插件
#### 插件介绍
Jcrop是一款非常实用的图片裁剪插件，支持动态调整裁剪区域，即时预览裁剪效果，以及自定义裁剪比例等功能。开发者可以通过简单的配置和回调函数来控制裁剪过程。
#### 实现步骤
1. **引入Jcrop资源**：在页面中引入Jcrop的样式文件和脚本文件，以及必要的jQuery库。
```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>
```
2. **设置图片展示区**：创建一个用于展示原始图片的`<asp:Image>`控件和一个用于预览裁剪效果的`<div>`容器。
```html
<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>
```
这里，`#preImg`的宽度和高度决定了裁剪框的大小，而`overflow:hidden`属性则确保裁剪效果能够实时预览。
3. **初始化Jcrop**：使用`$('#target')`选择器调用Jcrop方法，并设定裁剪规则，如比例、最小尺寸等。
```javascript
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
onRelease: clearCoords,
aspectRatio: 150 / 80,
minSize: [50, 50], // 最小尺寸
setSelect: [0, 0, 150, 80] // 默认选择区域
}, function() {
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
```
4. **更新预览效果**：通过`updatePreview`函数根据裁剪框的位置和尺寸调整预览图片的样式，实现即时预览。
```javascript
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = 150 / c.w;
var ry = 80 / c.h;
var _width = Math.round(rx * boundx);
var _height = Math.round(ry * boundy);
$('#preview').css({
width: _width + 'px',
height: _height + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
}
```
### 后台处理：System.Drawing.Image类
在用户提交裁剪后的图片信息后，服务器端需要使用C#的`System.Drawing.Image`类进行实际的图片裁剪操作。这通常涉及读取图片、根据前端传递的坐标和尺寸信息进行裁剪、保存新图片等步骤。
#### 实现步骤
1. **获取裁剪参数**：从前端接收裁剪的坐标、宽度和高度。
2. **加载原图**：使用`System.Drawing.Image.FromFile`或`FromStream`方法加载原始图片。
3. **执行裁剪**：通过`Image.GetThumbnailImage`方法或手动使用`Graphics`对象和`DrawImage`方法裁剪图片。
4. **保存新图片**：使用`Save`方法保存裁剪后的图片到指定路径。
通过上述前后端的配合，可以在Asp.Net平台上实现高效且用户友好的图片在线裁剪功能。
