PHP结合JQueryJcrop实现图片裁切实例详解

前端技术 2023/09/01 PHP

我们经常可以看到一些网站上有图片剪切的功能，或许你会觉得这一功能炫目华丽，神秘莫测！但是今天介绍的一款专用于图片裁切的插件jquery.Jcrop.min.js就将揭开图片剪切的神秘面纱。使用这个插件可以很方便的实现这一功能，使用时仅需鼠标在图片上圈选出选区，即可把图片裁切成所选部分，非常适合用于头像的裁切编辑功能。

本实例演示分为HTML和php两部分：

第一部分，HTML代码：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<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)
{
 jQuery(\'#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>
</head>
<body>
<img id=\"imghead\" border=0 src=\'./image/b4.jpg\' />
<form action=\"crop.php\" method=\"post\" onsubmit=\"return checkCoords();\">
 <input type=\"text\" id=\"x\" name=\"x\" />
 <input type=\"text\" id=\"y\" name=\"y\" />
 <input type=\"text\" id=\"w\" name=\"w\" />
 <input type=\"text\" id=\"h\" name=\"h\" />
 <input type=\"submit\" value=\"提交\">
</form>
</body>
</html>

第二部分：PHP处理部分crop.php：

<?php
if ($_SERVER[\'REQUEST_METHOD\'] == \'POST\')
{
 $targ_w = $targ_h = 150;
 $jpeg_quality = 90;
 $src = \'./image/b4.jpg\';
 $img_r = imagecreatefromjpeg($src);
 $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
 imagecopyresampled($dst_r,$img_r,0,0,$_POST[\'x\'],$_POST[\'y\'],
 $targ_w,$targ_h,$_POST[\'w\'],$_POST[\'h\']);
 header(\'Content-type: image/jpeg\');
 imagejpeg($dst_r,null,$jpeg_quality);
 exit;
}
?>

补充：jquery.Jcrop.min.js本站下载地址：http://www.phpstudy.net/jiaoben/24768.html

本文地址：https://www.stayed.cn/item/2639

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案