一般来说，原理很简单，一般流程如下：在浏览器上加载原始图像——用矩形框选择原始图像上的区域，并将选择的顶点坐标和矩形大小发送给服务器——服务器使用图像切割算法切割原始图像并输出切割后的图像。我们将在下面详细讨论和分析这些步骤，并在最后附上一个小演示供您参考。1.不用说，原来的图片是加载到页面上的，也就是页面上显示了一张图片，并且固定了一个img标签，但是对于下一个演示，代码img src=' http : girl . jpg ' alt=' id=' test image ' style=' float 3360 left；'2.用矩形框选择原始图片上的区域。我们需要使用jQuery插件JCOP。感谢JCOP，他的项目页面地址是http://deepliquid.com/content/Jcrop.html.再次感谢。下一步就是使用这个插件，这样我们就可以随意剪切原图了。在页面上放几个隐藏字段来存储当前选中的顶点坐标和选中矩形的大小，然后放一个保存按钮。点击保存按钮后，剪切的图片将保存在服务器上。代码如下：复制的代码如下： form id=' avatar form ' action=' input id=' x ' name=' x ' type=' hidden ' input id=' y ' name=' y ' type=' hidden ' input id=' w ' name=' w ' type=。' hidden '输入id=' h ' name=' h ' type=' hidden ' input class=' input _ BTN ' id=' btnsaveavatar ' value='确认保存' type='提交'/表单的四个隐藏字段分别表示左上角顶点的x: x坐标；y:左上角顶点的y坐标；w:选择矩形的宽度；h:选择矩形长度。然后我们调用插件，做好初始化工作。导入js和css文件：复制的代码如下： script type=' text/JavaScript ' src=' http : JS/jquery . JS '/script type=' text/JavaScript ' src=' http 3360 JS/jcrop/JS/jquery . jcrop . JS '/script link rel='样式表' href=' JS/jcrop/CSS/jquery . jcrop . CSS ' type=' text/CSS '。ready(function(){ $('#TestImage '))。jcrop({ onchange : updateCoords，onSelect: updateCoords })；$('#BtnSaveAvatar ')。单击(function(){ $)。ajax({ url:'Handler.ashx '，data:{'x':$('#x ')。val()，' y':$('#y ')。val()，' w':$('#w ')。val()，' h':$('#h ')。val()}，数据类型：“text/JSON”，类型：“post”，成功：函数(o){ window . location . href=' result . aspx？URL=' o；}//成功后，跳转到结果页面查看剪切图片，并放入URL })；返回false});});函数updateCoords(c){ $('#x ')。val(c . x)；$('#y ')。瓦尔(c . y)；$('#w ')。val(c . w)；$('#h ')。val(c . h)；};经过以上步骤，我们很高兴看到一个美丽的女人出现在我们面前，让我们选择任何一个部分。这非常令人兴奋，因为演示在最后，让我们先在这里剪切一个渲染。

3、服务器端切割图片并输出切割后的图片：切割图片的主要类代码如下：复制代码代码如下：公共类ImageCut { ///summary ///剪裁-用GDI ////summary ///param name='b '原始位图/param ///param名称='StartX '开始坐标X/param ///param名称='StartY '开始坐标Y/param ///param name='iWidth '宽度/param///param name=' ihaThEr '高度/param/返回剪裁后的位图/返回公共位图KiCut(位图b){ if(b==null)}返回null} int w=b . Widthint h=b。高度；if(X=w | | Y=h){ 0返回null } if(X Width w){ Width=w-X；} if(Y Height h){ Height=h-Y；}请尝试{位图bmpOut=新位图（宽度、高度、像素格式.格式24 bpprgb)；图形g=图形.来自IMage(BMPout)；g .绘制图像(b，新矩形(0,0,宽度，高度),新矩形(X，Y，宽度，高度)，GraphicsUnit .像素);g。处置();返回bmpOut } catch { return null } } public int X=0；public int Y=0；public int Width=120 public int Height=120 public ImageCut(int X，int y，int Width，int heighth){ X=X；Y=y宽度=宽度；高度=高度；} } 在Handler.ashx中，接收页面传递过来的切割图片的顶点坐标以及长宽尺寸，并调用C#图像切割类实现图片切割：复制代码代码如下：公共无效进程请求(HttpContext上下文){ string xstr=context .请求[' x ']；字符串ystr=上下文.请求[' y ']；字符串wstr=上下文。请求[' w ']；字符串hstr=上下文。请求[' h ']；字符串sourceFile=上下文服务器。MapPath(' girl。jpg’)；字符串savePath='CutImage/' Guid .NewGuid()' .jpg '；int x=0；int y=0；int w=1；int h=1；尝试{ x=int .解析(xstr)；y=int .解析(ys tr)；w=int .解析(wstr)；h=int .解析(hstr)；} catch { } ImageCut IC=new ImageCut(x，y，w，h)；系统。绘图。位图切割=集成电路。新系统。绘图。位图（源文件));字符串cutPath=上下文。服务器。MapPath(保存路径);可爱。保存（剪切路径，系统绘图。成像。imageformat。JPEG)；语境。响应。写入（保存路径);//输出保存的路径，以便页面端接收路径显示切割后的图片} 最后我们在Result.aspx页面上接收切割后的图片路径并显示切割后的图片：img src=' http :%=Request[' URL ']% ' alt=' ' ' '/好了，整个过程就完成了，为了大家能更好的参考学习，下面附上小演示，下载演示。最后，你是否带走了我留下的这片云彩？请告诉我，我很期待你的答案。