`
dcdc723
  • 浏览: 183490 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用jcrop裁剪图片

    博客分类：
  • PHP
jQueryCSSCC++C# 
阅读更多 
<?
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$file="7.jpg";
$imgs=imagecreatefromjpeg($file);
$x=imagesx($imgs);
$y=imagesy($imgs);
$x1=$_POST['x1'];
$x2=$_POST['x2'];
$y1=$_POST['y1'];
$y2=$_POST['y2'];
$w=$_POST['w'];  //目标的宽度;
$h=$_POST['h'];   //高
//imagecopyresampled ($目标图像资源,$源图像资源,$目标图像X轴,目标图像Y轴,$源图像X轴,$源图像Y轴,$目标图像宽度,$目标图像高度,$源图像宽度,$源图像高度 );
$imgt=imagecreatetruecolor($w,$h);
//imagecopyresized($imgt,$imgs,0,0,$x1,$y1,$w,$h,$w,$h);
imagecopyresampled($imgt,$imgs,0,0,$x1,$y1,$w,$h,$w,$h);
imagejpeg($imgt,"dcd.jpg");
imagedestroy($imgt);
imagedestroy($imgs);
echo "<img src=dcd.jpg />";
}
?>
<html>
	<head>
		<script src="jquery.min.js"></script>
		<script src="jquery.Jcrop.js"></script>
		<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="demos.css" type="text/css" />
		<script language="Javascript">
			jQuery(document).ready(function(){
				$('#cropbox').Jcrop({
					onChange: showCoords,
					onSelect: showpic
				});
			});
          function showpic(){
			 // alert('dc');
			  }
			function showCoords(c)
			{
				$('#x1').val(c.x);
				$('#y1').val(c.y);
				$('#x2').val(c.x2);
				$('#y2').val(c.y2);
				$('#w').val(c.w);
				$('#h').val(c.h);
				if (parseInt(c.w) > 0)
				{
					var rx = 100 / c.w;
					var ry = 100 / c.h;

					$('#slt').css({
						width: Math.round(rx*c.w) + 'px',
						height: Math.round(ry *c.h) + 'px',
						marginLeft: '-' + Math.round(rx * c.x) + 'px',
						marginTop: '-' + Math.round(ry * c.y) + 'px'
					                     });
				 }
			};
		</script>
	</head>
	<body>
    <img src="7.jpg" id="cropbox" />
    		<form method="post" action="">
			<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
			<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
			<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
			<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
			<label>W <input type="text" size="4" id="w" name="w" /></label>
			<label>H <input type="text" size="4" id="h" name="h" /></label>
            <input type="submit" value="生成" />
		</form>
        		<div style="width:100px;height:100px;overflow:hidden;">
			  <img src="7.jpg" id="slt" />
		</div>
    	</body>
</html>

 

分享到：
| 图片加水印
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics