当前位置：首页 > 资讯 > 技术文档

jQuery Jcrop插件实现图片选取功能

时间：2022-10-08 07:52 编辑：来源：阅读：
扫一扫，手机访问

摘要：jQuery Jcrop插件实现图片选取功能

总的来说，原理很简单，大致流程是：在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片。下面我们就分别对这几个步骤详细展开讨论分析，并在最后附上小demo供大家参考。 [b]1、在页面上加载原图[/b] 这个就不用多说了，就是在页面上显示一张图片，一个img标签搞定，不过为了下一步演示，还是贴一下代码 <img src="girl.jpg" alt="" id="TestImage" style="float: left;"> [b]2、用矩形框在原图上选取区域[/b] 这个我们要用到一个jQuery插件Jcrop，感谢Jcrop，其项目页面地址：http://deepliquid.com/content/Jcrop.html，再次感谢。接下来就是运用这个插件来让我们能在原图上随意地切图。先在页面上放几个隐藏域，用来存放当前选取的顶点坐标及选取矩形的尺寸，再放一个保存按钮，点击保存按钮后将在服务器上保存切割后的图片。代码如下：

[url=js/Jcrop/css/jquery.Jcrop.css]

初始化原图的js代码：

[u]复制代码[/u][/url] 代码如下:

$(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在最后，先在这截一张效果图吧 [img]http://files.jb51.net/upload/201111/20111123185027972.jpg[/img] [b]3、服务器端切割图片并输出切割后的图片：[/b] 切割图片的主要类代码如下：

[url=http://xiazai.jb51.net/201111/yuanma/aspnet_jquery_imagecut.rar]下载demo[/url]。最后，你是否带走了我留下的这片云彩？请告诉我，我很期待你的答案。