使用 jcrop 裁剪后预览图像不显示
Posted
技术标签:
【中文标题】使用 jcrop 裁剪后预览图像不显示【英文标题】：Preview image not shwing up after cropping with jcrop 【发布时间】：2013-12-19 12:51:15 【问题描述】：我创建了一种使用两个不同 php 页面上传图片的新方法。
1 负责上传，而另一个负责裁剪。在某种程度上，它似乎在一定程度上起作用，我必须在它保存到的文件夹上设置权限，它似乎可以工作，但由于某些奇怪的原因知道它不起作用。它假设将裁剪图像的副本保存到同一个文件夹，但目前似乎没有这样做。我不知道它为什么起作用并且已经停止工作。我一直在查看代码一段时间，但对于我的生活来说，我看不到问题我对 php 相对陌生，但它似乎是一种能够上传图像并在使用 IE 8 时裁剪它们的解决方案,9 或其他浏览器。
这里是upload.php部分的代码：
<!DOCTYPE html PUBLIC "-//W3C// XHHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML/DTD/xhtml1-strict.dtd" >
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
</head>
<body >
<?php
$folder = 'imgtest/';
$orig_w = 500;
if(isset($_POST['submit']) )
$imageFile = $_FILES['image']['tmp_name'];
$filename = basename( $_FILES['image']['name']);
list($width, $height) = getimagesize($imageFile);
$src = imagecreatefromjpeg($imageFile);
$orig_h = ($height/$width) * $orig_w;
$tmp = imagecreatetruecolor($orig_w,$orig_h);
imagecopyresampled($tmp, $src, 0,0,0,0, $orig_w,$orig_h,$width,$height);
imagejpeg($tmp, $folder.$filename, 100);
imagedestroy($tmp);
imagedestroy($src);
$filename = urlencode($filename);
header("Location: crop.php?filename=$filename&height=$orig_h");
?>
<h1>php Upload Form</h1>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
<p>
<label for="image">Image:</label>
<input type="file" name="image" id="image"/><br/>
</p>
<p>
<input type="submit" name="submit" value="Upload Image!"/>
</p>
</form>
</body>
<script>
</script>
</html>
这是裁剪部分的代码：
<?php
$folder = 'imgtest/';
$filename = $_GET['filename'];
$orig_w = 500;
$orig_h = $_GET['height'];
$targ_w = 120;
$targ_h = 100;
$ratio = $targ_w / $targ_h;
if (isset($_POST['submit']))
$src = imagecreatefromjpeg($folder.$filename);
$tmp = imagecreatetruecolor($targ_w, $targ_h);
imagecopyresampled($tmp, $src, 0,0,$_POST['x'],$_POST['y'], $targ_w, $targ_h, $_POST['w'], $_POST['h']);
imagejpeg($tmp, $folder.'t_'.$filename, 100);
imagedestroy($tmp);
imagedestroy($src);
echo "<h1> Saved Thumbnail</h1> <img src=\"$folder/t_$filename\"/>";
?>
<!DOCTYPE html PUBLIC "-//W3C// XHHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML/DTD/xhtml1-strict.dtd" >
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>php crop form</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="js/jquery.Jcrop.js" ></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css"/>
<style type="text/css">
#preview
width: <?php echo $targ_w?>px;
height:<?php echo $targ_h?>px;
overflow:hidden;
</style>
</head>
<body >
<h1>Jcrop Plugin Behavior</h1>
<table>
<tr>
<td>
<img src="<?php echo $folder.$filename?>" id="cropbox" />
</td>
<td>
Thumb Preview:
<div id="preview">
<img src="<?php echo $folder.$filename?>" />
</div>
</td>
</tr>
</table>
<form action="<?php echo $_SERVER['REQUEST_URI']?>" method="post">
<p>
<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" id="submit" value="Crop Image!"/>
</p>
</form>
</body>
<script type="text/javascript">
$(function()
$('#cropbox').Jcrop(
aspectRatio: <?php echo $ratio?>,
setSelect:[0,0,<?php echo $orig_w.','.$orig_h;?>],
onSelect:updateCoords,
onChange:updateCoords
);
);
function updateCoords(c)
showPreview(c);
$("#x").val(c.x);
$("#y").val(c.y);
$("#w").val(c.w);
$("#h").val(c.h);
function showPreview(coords)
var rx =<?php echo $targ_w;?> / coords.w
var ry =<?php echo $targ_h;?> / coords.h
$("#preview img").css(
width: Math.round(rx*<?php echo $orig_w;?>)+'px',
height: Math.round(ry*<?php echo $orig_h;?>)+'px',
marginLeft: '-' + Math.round (rx*coords.x)+'px',
marginTop: '-' + Math.round(ry*coords.y)+'px'
);
</script>
</html>
我们将不胜感激。
【问题讨论】：
【参考方案1】：标头（在这种情况下是位置 php 标头）必须在 any 内容已经回显之前发送。因此，将upload.php 中的 php 部分移动到该文件的顶部：
<?php
$folder = 'imgtest/';
$orig_w = 500;
if(isset($_POST['submit']) )
$imageFile = $_FILES['image']['tmp_name'];
$filename = basename( $_FILES['image']['name']);
list($width, $height) = getimagesize($imageFile);
$src = imagecreatefromjpeg($imageFile);
$orig_h = ($height/$width) * $orig_w;
$tmp = imagecreatetruecolor($orig_w,$orig_h);
imagecopyresampled($tmp, $src, 0,0,0,0, $orig_w,$orig_h,$width,$height);
imagejpeg($tmp, $folder.$filename, 100);
imagedestroy($tmp);
imagedestroy($src);
$filename = urlencode($filename);
header("Location: crop.php?filename=$filename&height=$orig_h");
?>
<!DOCTYPE html PUBLIC "-//W3C// XHHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML/DTD/xhtml1-strict.dtd" >
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
</head>
<body >
<h1>php Upload Form</h1>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
<p>
<label for="image">Image:</label>
<input type="file" name="image" id="image"/><br/>
</p>
<p>
<input type="submit" name="submit" value="Upload Image!"/>
</p>
</form>
</body>
<script>
</script>
</html>
判断它是否仍然无法正常工作。
【讨论】：
刚刚试了一下，把它放在顶部，但它似乎仍然不起作用。如果我可以在 IE 中调用它们，它只显示图像占位符，在 Firefox 中它只显示替代文字。 您尚未在图像显示页面中设置 php 变量 (<img src="<?php echo $folder.$filename?>" alt="thumb" />)。会不会是问题？
我不确定我明白你的意思。我跟着一个教程，那个人说这样说。
我必须对 PHP.INI 做些什么才能让它工作吗？
不，我不这么认为。您在裁剪页面中在哪里定义了这些 php 变量？因为我没有看到他们在该页面的任何地方定义...以上是关于使用 jcrop 裁剪后预览图像不显示的主要内容，如果未能解决你的问题，请参考以下文章