PHP image crop

[princeofpersia]

Hi guys,

 

I have a php crop issue, I am using Jcrop (JQUERY plugin) to allow users crop their user profile picture jquery doesnt have an issue (is easy to select) but when processing image crop in PHP, image crop doesnt work and all i get is the screenshot attached (of the page processing both upload and crop PHP code), so this all happens in same page. Could you please let me know what im doing wrong?

 

My GD is enabled as below

 

 

GD Support enabled

GD Version bundled (2.0.34 compatible)

FreeType Support enabled

FreeType Linkage with freetype

FreeType Version 2.2.1

GIF Read Support enabled

GIF Create Support enabled

JPG Support enabled

PNG Support enabled

WBMP Support enabled

XPM Support enabled

XBM Support enabled

 

 

and this is my code

 

 

<?php
include_once ("../../../includes/functions.inc");
include_once ("../../../includes/mainheader.php");
authenticate();


?>
<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>


<div class='alert alert-block'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>Important!</h4>
  We only accept Gif, JPG, JPEG, BMP and PNG file formats. Please make sure your picture file size doesn't exceed more than 300KB.
</div>
<?php
define ("MAX_SIZE",409600);
$path = "../../static/images/profile-pic/";
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST['submit']))
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];

if ($_FILES["photoimg"]["name"] > MAX_SIZE)
{
echo"<div class='alert alert-error'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>File Size Exceeded!</h4>

</div>";

}
else
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
$actual_image_name =$_SESSION['account_ref'].time().substr($txt, 5).".".$ext;

$tmp = $_FILES['photoimg']['tmp_name'];

if(move_uploaded_file($tmp, $path.$actual_image_name))
{
$_SESSION['image_name']=$actual_image_name;
$insert=mysql_query("INSERT INTO profile_pic (profile_pic,account_no,img_session) VALUES ('$actual_image_name', '".$_SESSION['account_ref']."','".$_SESSION['image_name']."')");

}
else
echo"<div class='alert alert-error'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>There is an error!</h4>

</div>";

}
else
echo"<div class='alert alert-error'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>Invalid File Format!</h4>

</div>"; 
}
else
echo"<div class='alert alert-error'>
  <a class='close' data-dismiss='alert' href='#'>×</a>
  <h4 class='alert-heading'>No Photo?</h4>

</div>"; 
}


?>

<div class="single-page-header">
  <h1 class="pages-header">Upload Your Profile Picture</h1></div>

<div class="single-page-content">

<div class="span8 activate-login">
<?php

$select=mysql_query("SELECT * FROM profile_pic WHERE img_session='".$_SESSION['image_name']."'");
while($row=mysql_fetch_array($select)) {

$actual_image_name=$row['profile_pic'];	
}

?>
<div class="image-decorator">
			<img alt="profile-pic" height="360" id="cropbox" src="<?php echo"../../static/images/profile-pic/$actual_image_name"; ?>" width="480" />
		</div>

<div>



<form id='' method='post' enctype='multipart/form-data' class='form-horizontal'>
<input type='file' name='photoimg' id='photoimg' />
<input type='hidden' name='image_name' id='image_name' value='<?php echo($actual_image_name)?>' />

        <button type='submit' class='btn btn-primary' name='submit'>Upload</button>

</form>

<?php if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['crop']))
{
$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = '../../static/images/profile-pic/$actual_image_name';
$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,$output_filename,$jpeg_quality);

exit;
}


?>



	<!-- This is the form that our event handler fills -->
	<form action="profile-picture.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" name="crop"/>
	</form>


<?php include_once ("../../../includes/footer.php"); ?>

 

 

Thanks in advance

[requinix]

You're outputting a whole bunch of HTML before you even get to the image resizing part. That's not good. Move it to the very beginning - before the HTML, before the header, before any code that would output something.

[princeofpersia]

I've done that, still the same

[princeofpersia]

I have even tried it with a static picture but still same result

[requinix]

And what's your code now?

[Kristoff1875]

If you right click and view the properties of the image that is broken, what is the address of it?

[Barand]

Put image creation code in a php file of its own, say "myimage.php"

 

Place the image on your page as you would any other image - using an <img> tag. You can pass parameters to the image php file in the src attribute.

 

<img src="myimage.php?file=someFileName" alt='my image' />

 

myimage.php would just contain the image generation code e.g.

<?php
$file = $_GET['file'];
$im = imagecreate(120, 90);

//code to process file and build image

header("content-type: image/png");
imagepng($im);
imagedestroy($im);
?>