我们经常可以看到一些网站上有图片剪切的功能，或许你会觉得这一功能炫目华丽，神秘莫测！但是今天介绍的一款专用于图片裁切的插件jquery.Jcrop.min.js就将揭开图片剪切的神秘面纱。使用这个插件可以很方便的实现这一功能，使用时仅需鼠标在图片上圈选出选区，即可把图片裁切成所选部分，非常适合用于头像的裁切编辑功能。
本实例演示分为HTML和php两部分：
第一部分，HTML代码：
<title>Jcrop实现图片裁剪</title><script src="./jquery-1.6.2.min.js"></script><script src="./jquery.Jcrop.min.js"></script><link rel="stylesheet" href="./jquery.Jcrop.min.css" rel="external nofollow" type="text/css" /><style type="text/css">#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}#imghead{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}</style><script language="Javascript">jQuery(function(){ jQuery('#imghead').Jcrop({ aspectRatio: 1, onSelect: updateCoords, //选中区域时执行对应的回调函数 onChange: updateCoords, //选择区域变化时执行对应的回调函数 });});function updateCoords(c){ jQu<div>……本2文来源gaodai.ma#com搞##代!^码@网3</div><code>搞代gaodaima码</code>ery('#x').val(c.x); //选中区域左上角横 jQuery('#y').val(c.y); //选中区域左上角纵坐标 //jQuery("#x2").val(c.x2); //选中区域右下角横坐标 //jQuery("#y2").val(c.y2); //选中区域右下角纵坐标 jQuery('#w').val(c.w); //选中区域的宽度 jQuery('#h').val(c.h); //选中区域的高度};function checkCoords(){ if (parseInt(jQuery('#w').val())>0) return true; alert('请选择需要裁切的图片区域.'); return false;};</script><body>
第二部分：PHP处理部分crop.php：
补充：jquery.Jcrop.min.js本站下载地址：http://www.gaodaima.com/jiaoben/24768.html
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：PHP结合JQueryJcrop实现图片裁切实例详解_php技巧
转载请注明原文链接：PHP结合JQueryJcrop实现图片裁切实例详解_php技巧
