PHP结合JQueryJcrop实现图片裁切实例详解，
- WBOYOriginal
- 2016-06-13 09:28:361259browse
PHP结合JQueryJcrop实现图片裁切实例详解，
我们经常可以看到一些网站上有图片剪切的功能，或许你会觉得这一功能炫目华丽，神秘莫测！但是今天介绍的一款专用于图片裁切的插件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' / alt="PHP结合JQueryJcrop实现图片裁切实例详解，" >
<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.bkjia.com/jiaoben/24768.html
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：RTX的api開發實例，rtx開發實Next article：Drupal7安装完整教程，drupal7教程