有了jQuery.Jcrop，选取美男的哪个部位你说了算
|
副问题[/!--empirenews.page--]
哈哈，亲们，真的不肯意信托你们是被问题吸引进来的，但究竟让我不得不认可汉子的天性。可是，致意心，我绝非问题党（我最悔恨那些挥霍各人时刻的问题党了），既然你有幸进来了，那我得想步伐让你带着收成分开。轻轻地我走了，正如我轻轻地来，我要带走楼主留给我的一片云彩…… 好吧，收起我的纵脱不羁，让我们立马切入正题，正如问题上说的，本日我们要在ASP.NET顶用jQuery.Jcrop插件实现图片的选取成果，你想选取美男的哪个部位你说了算，我就管不着了。 总的来说，道理很简朴，大抵流程是：在赏识器上加载原图 --> 用矩形框在原图上选取地区并将选取的极点坐标和矩形尺寸发送至处事器 --> 处事器端用图片切割算法切割原图并输出切割后的图片。下面我们就别离对这几个步调具体睁开接头说明，并在最后附上小demo供各人参考。 1、在页面上加载原图 这个就不消多说了，就是在页面上表现一张图片，一个img标签搞定，不外为了下一步演示，照旧贴一下代码 Copy to Clipboard 引用的内容：[www.veryhuo.com]
<img src="girl.jpg" kesrc="girl.jpg" alt="" id="TestImage" style="float: left;">
2、用矩形框在原图上选取地区 这个我们要用到一个jQuery插件Jcrop，感激Jcrop，其项目页面地点：http://deepliquid.com/content/Jcrop.html，再次感激。接下来就是运用这个插件来让我们能在原图上随意地切图。先在页面上放几个潜匿域，用来存放当前选取的极点坐标及选取矩形的尺寸，再放一个生涯按钮，点击生涯按钮后将在处事器上生涯切割后的图片。代码如下： Copy to Clipboard引用的内容：[www.veryhuo.com]
<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> 四个潜匿域别离暗示x：左上极点x坐标；y：左上极点y坐标；w：选取矩形宽度；h：选取矩形长度。 引用的内容：[www.veryhuo.com]
<script type="text/javascript" src="js/jquery.js" kesrc="js/jquery.js"></script> <script type="text/javascript" src="js/Jcrop/js/jquery.Jcrop.js" kesrc="js/Jcrop/js/jquery.Jcrop.js"></script> <link rel="stylesheet" href="js/Jcrop/css/jquery.Jcrop.css" kesrc="js/Jcrop/css/jquery.Jcrop.css" type="text/css"> 初始化原图的js代码： Copy to Clipboard引用的内容：[www.veryhuo.com]
$(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(o){ window.location.href="result.aspx?url="+o;} //乐成后跳转到result页面查察切割后图片，把url }); return false; }); }); function updateCoords(c){ $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; 颠末上述步调，我们很兴奋的看到一位美男呈此刻我们面前，并任由我们选取任何部位，很刺激吧，因为demo在最后，先在这截一张结果图吧
3、处事器端切割图片并输出切割后的图片： 切割图片的首要类代码如下： Copy to Clipboard引用的内容：[www.veryhuo.com]
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(0, 0, Width, Height), new Rectangle(X, Y, Width, Height), GraphicsUnit.Pixel); g.Dispose(); return 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 heigth) { X = x; Y = y; Width = width; Height = heigth; } } （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
