今天有一个项目的功能需求 “在上传照片的时候能进行裁剪”，网上找了下，发现有Jcrop这款插件，自己试了下，感觉很不错，蛮好用的。又能增加用户体验，测试了兼容性也很好，所以在这里分享下
首先，可以到官网上下载这款插件htttp://www.jquery.com,下载后有需要的话可以看下里面的demo
在项目中，只要在head中引用
<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="jquery.Jcrop.js" type="text/javascript"></script>
前台页面，要加上4个隐藏域，分别记录剪切后的x,y坐标和长，宽。附上代码
<div>
<!--需要剪切的图片-->
<img src="gq_nav.jpg" alt="" id="TestImage" style="float: left;">
</div>
<form id="AvatarForm" action="">
<input id="x" name="x" type="hidden"/>
<input id="y" name="y" type="hidden"/>
<input id="w" name="w" type="hidden"/>
<input id="h" name="h" type="hidden"/>
<input class="input_btn" id="BtnSaveAvatar" value="确定保存" type="submit"/>
</form>
<!--简介后显示的图片-->
<img id="CutImage" />
接着实例化Jcrop
<script>
$(document).ready(function () {
$('#TestImage').Jcrop({
onChange: updateCoords,
onSelect: updateCoords
});
$("#BtnSaveAvatar").click(function () {
$.ajax({
url: 'Handler.ashx',
data: { 'x': $("#x").val(), 'y': $("#y").val(), 'w': $("#w").val(), 'h': $("#h").val() },
datatype: "text/json",
type: 'post',
success: function (imgUrl) {
$("#CutImage").attr("src", imgUrl);
}
});
return false;
});
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
</script>
之后看下运行效果图
好了，效果出来了，然后要保存截取后的图片了，这样在刚刚的脚本中可以看到用ajax提交到Handler.ashx上去处理，附上代码
public void ProcessRequest(HttpContext context)
{ //接收位置x,y。
//接收长宽w,h。
string xstr = context.Request["x"];
string ystr = context.Request["y"];
string wstr = context.Request["w"];
string hstr = context.Request["h"];
//获取原始图片
string sourceFile = context.Server.MapPath("gq_nav.jpg");
//图片路径
string savePath = "CutImage/" + Guid.NewGuid() + ".jpg";
int x = ;
int y = ;
int w = ;
int h = ;
try
{
x = int.Parse(xstr);
y = int.Parse(ystr);
w = int.Parse(wstr);
h = int.Parse(hstr);
}
catch { }
ImageCut ic = new ImageCut(x, y, w, h);
System.Drawing.Bitmap cuted = ic.KiCut(new System.Drawing.Bitmap(sourceFile));
string cutPath = context.Server.MapPath(savePath);
cuted.Save(cutPath, System.Drawing.Imaging.ImageFormat.Jpeg);
context.Response.Write(savePath); //输出保存的路径，以便页面端接收路径显示切割后的图片
}
在Handler.ashx中可以看到生成新的图片是交给ImageCut这个类去做的，这里也附上代码
public class ImageCut
{
///<summary>
/// 剪裁 -- 用GDI+
///</summary>
///<param name="b">原始Bitmap</param>
///<param name="StartX">开始坐标X</param>
///<param name="StartY">开始坐标Y</param>
///<param name="iWidth">宽度</param>
///<param name="iHeight">高度</param>
///<returns>剪裁后的Bitmap</returns>
public Bitmap KiCut(Bitmap b)
{
if (b == null)
{
return null;
} int w = b.Width;
int h = b.Height; if (X >= w || Y >= h)
{
return null;
} if (X + Width > w)
{
Width = w - X;
} if (Y + Height > h)
{
Height = h - Y;
} try
{
Bitmap bmpOut = new Bitmap(Width, Height, PixelFormat.Format24bppRgb); Graphics g = Graphics.FromImage(bmpOut);
g.DrawImage(b, new Rectangle(, , Width, Height), new Rectangle(X, Y, Width, Height), GraphicsUnit.Pixel);
g.Dispose(); return bmpOut;
}
catch
{
return null;
}
} public int X = ;
public int Y = ;
public int Width = ;
public int Height = ;
public ImageCut(int x, int y, int width, int heigth)
{
X = x;
Y = y;
Width = width;
Height = heigth;
}
}
这样就可以实现在线剪裁图片的效果了。因为觉得这款插件还算不错，所以特此分享下，希望大师们不要取笑，如果哪位有更好的建议或其他类似的插件，也希望
能分享给小弟。
另：附上这个插件的属性
| allowSelect | true | 允许新选框 |
| allowMove | true | 允许选框移动 |
| allowResize | true | 允许选框缩放 |
| trackDocument | true | |
| baseClass | “jcrop” | 基础样式名前缀。说明：class=”jcrop-holder”，更改的只是其中的 jcrop。 |
| addClass | null | 添加样式。例：假设值为 “test”，那么会添加样式到 |
| bgColor | “black” | 背景颜色。颜色关键字、HEX、RGB 均可。 |
| bgOpacity | 0.6 | 背景透明度 |
| bgFade | false | 使用背景过渡效果 |
| borderOpacity | 0.4 | 选框边框透明度 |
| handleOpacity | 0.5 | 缩放按钮透明度 |
| handleSize | 9 | 缩放按钮大小 |
| handleOffset | 5 | 缩放按钮与边框的距离 |
| aspectRatio | 0 | 选框宽高比。说明：width/height |
| keySupport | true | 支持键盘控制。按键列表：上下左右（移动）、Esc（取消）、Tab（跳出裁剪框，到下一个） |
| cornerHandles | true | 允许边角缩放 |
| sideHandles | true | 允许四边缩放 |
| drawBorders | true | 绘制边框 |
| dragEdges | true | 允许拖动边框 |
| fixedSupport | true | |
| touchSupport | null | |
| boxWidth | 0 | 画布宽度 |
| boxHeight | 0 | 画布高度 |
| boundary | 2 | 边界。说明：可以从边界开始拖动鼠标选择裁剪区域 |
| fadeTime | 400 | 过度效果的时间 |
| animationDelay | 20 | 动画延迟 |
| swingSpeed | 3 | 过渡速度 |
| minSelect | [0,0] | 选框最小选择尺寸。说明：若选框小于该尺寸，则自动取消选择 |
| maxSize | [0,0] | 选框最大尺寸 |
| minSize | [0,0] | 选框最小尺寸 |
| onChange | function(){} | 选框改变时的事件 |
| onSelect | function(){} | 选框选定时的事件 |
| onRelease | function(){} | 取消选框时的事件 |
API 接口
| 名称 | 说明 |
|---|---|
| setImage(string) | 设定（或改变）图像。例：jcrop_api.setImage(“newpic.jpg”) |
| setOptions(object) | 设定（或改变）参数，格式与初始化设置参数一样 |
| setSelect(array) | 创建选框，参数格式为：[x,y,x2,y2] |
| animateTo(array) | 用动画效果创建选框，参数格式为：[x,y,x2,y2] |
| release() | 取消选框 |
| disable() | 禁用 Jcrop。说明：已有选框不会被清除。 |
| enable() | 启用 Jcrop |
| destroy() | 移除 Jcrop |
| tellSelect() | 获取选框的值（实际尺寸）。例子：console.log(jcrop_api.tellSelect()) |
| tellScaled() | 获取选框的值（界面尺寸）。例子：console.log(jcrop_api.tellScaled()) |
| getBounds() | 获取图片实际尺寸，格式为：[w,h] |
| getWidgetSize() | 获取图片显示尺寸，格式为：[w,h] |
| getScaleFactor() | 获取图片缩放的比例，格式为：[w,h] |