我谦虚地推荐使用php / javascript代码,并且我从jcrop function downloaded开始学习
<?php
/**
* Jcrop image cropping plugin for jQuery
* Example cropping script
* @copyright 2008-2009 Kelly Hallman
* More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
$src = 'images/originalimage.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');
我 在成功测试代码之后,我只是在下面将值Null更改为“ test1.jpg”,以保存裁剪后的图像。
imagejpeg($dst_r,'test1.jpg',$jpeg_quality);
似乎只有第一次裁剪图像时它才能正常工作,因为当我尝试多次裁剪时,我会注意到我在目录中找到的裁剪图像与第一次图像相同。如果我将名称更改为test2.jpg(例如),则第一次将保存的裁剪区域成功保存,而第二次以后将具有与test1.jpg相同的行为。
exit;
}
// If not a POST request, display page below:
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
</head>
<body>
<!-- This is the image we're attaching Jcrop to -->
<img src="images/originalimage.jpg" id="cropbox" />
<!-- This is the form that our event handler fills -->
<form action="crop.php" method="post" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="Crop Image" />
</form>
</body>
</html>
我找不到问题。
我希望一些更新有用:单击“裁剪图像”后页面变为空白,如果我访问主机的文件管理器,我会注意到文件的尺寸发生了变化,因为它正确覆盖了新图像。但是,当我单击(在文件管理器中)打开图像时,它总是显示第一个裁剪的图像。这让我发疯。