首先，要下载Jcrop组件，这里是下载地址：http://deepliquid.com/content/Jcrop.htm
先看一下我们想要效果，还是不错的：
应该是这个效果吧!下面看一下js代码，最让人头疼的应该就是这些代码，简直白天不懂夜的黑啊：
1 <head runat="server"> 2 <title></title> 3 <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script> 4 <script src="js/jquery.Jcrop.js" type="text/javascript"></script> 5 <link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" /> 6 <script type="text/javascript" language="javascript"> 7 $(function () { 8 $("#TestImage").Jcrop({ 9 onChange: updateCoords, 10 onSelect: updateCoords 11 }); 12 13 $("#BtnSaveAvatar").click(function () { 14 var Imgname = document.getElementById("TestImage").alt; 15 $.ajax({ 16 url: 'Handler3.ashx', 17 data: { 'name': Imgname, 'x': $("#x").val(), 'y': $("#y").val(), 'w': $("#w").val(), 'h': $("#h").val() }, 18 datatype: "text/json", 19 type: 'post', 20 success: function (o) { window.location.href = "Login.aspx?url=" + o; } 21 }); 22 return false; 23 }); 24 }); 25 function updateCoords(c) { 26 $("#x").val(c.x); 27 $("#y").val(c.y); 28 $("#w").val(c.w); 29 $("#h").val(c.h); 30 }; 31 </script> 32 </head> 33 <body> 34 <div> 35 <input id="x" name="x" type="hidden"/> 36 <input id="y" name="y" type="hidden"/> 37 <input id="w" name="w" type="hidden"/> 38 <input id="h" name="h" type="hidden"/> 39 <img src="IMG/1.jpg" alt="IMG/1.jpg" id="TestImage" style="float: left;"/> 40 <input class="input_btn" id="BtnSaveAvatar" value="确定保存" type="submit"/> 41 </div> 42 </body> 43 </html>
这里Login.aspx页面是用来显示我们裁剪的那部分图像，裁剪成功后跳转到这个页面：
<img src="<%=Request["url"] %>" alt="" />
然后再看一下的我们的C#代码，拨开黑夜!
public class ImageCut
{
public int X;
public int Y;
public int Width;
public int Height;
public ImageCut(int x, int y, int width, int height)
{
this.X = x;
this.Y = y;
this.Width = width;
this.Height = height;
}
public Bitmap KiCut(Bitmap bmp)
{
if (bmp == null) { return null; }
int w = bmp.Width;
int h = bmp.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);//创建指定大小的Bitmap
Graphics g = Graphics.FromImage(bmpOut);//从指定的图像创建画图实例
g.DrawImage(bmp, new Rectangle(0, 0, Width, Height), new Rectangle(X, Y, Width, Height), GraphicsUnit.Pixel);//开始画图
g.Dispose();
return bmpOut;
}
catch
{
return null;
}
}
}
public class Handler3 : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string name=context.Request["name"];
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(name);
string savePath = "CutImage/" + Guid.NewGuid() + ".jpg";
int x = 0; int y = 0; int w = 1; int h = 1;
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);
Bitmap cuted = ic.KiCut(new System.Drawing.Bitmap(sourceFile));
string cutPath = context.Server.MapPath(savePath);
cuted.Save(cutPath,ImageFormat.Jpeg);
context.Response.Write(savePath);
}
public bool IsReusable {
get {
return false;
}
}
}
当我们