crop image problem, can't select area to crop

Felina · Sep 28, 2012

Hello, I am new here and not exactly experienced with coding, found a script that does exactly what I need for the time being,
uploads an image, re-sizes it and then makes a thumbnail out of the selected cropped area, the thing is,
once the image is uploaded a cropped version of it appears next to it but I can't move it to select the desired area,
it just stays in the upper left side, could you point out what am I doing wrong? thank you.

<?php
error_reporting (E_ALL ^ E_NOTICE);
session_start();
if (!isset($_SESSION['random_key']) || strlen($_SESSION['random_key'])==0){
    $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s'));
}

$upload_dir = "adopcionesfotos";
$upload_path = $upload_dir."/";
$large_image_prefix = "big_";
$thumb_image_prefix = "tiny_";
$large_image_name = $large_image_prefix.$_SESSION['random_key'].".jpg";
$thumb_image_name = $thumb_image_prefix.$_SESSION['random_key'].".jpg";
$max_file = "3145728";
$max_width = "240";
$thumb_width = "100";
$thumb_height = "100";

function resizeImage($image,$width,$height,$scale) {
	$newImageWidth = ceil($width * $scale);
	$newImageHeight = ceil($height * $scale);
	$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
	$source = imagecreatefromjpeg($image);
	imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
	imagejpeg($newImage,$image,90);
	chmod($image, 0777);
	return $image;
}

function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
	$newImageWidth = ceil($width * $scale);
	$newImageHeight = ceil($height * $scale);
	$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
	$source = imagecreatefromjpeg($image);
	imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
	imagejpeg($newImage,$thumb_image_name,90);
	chmod($thumb_image_name, 0777);
	return $thumb_image_name;
}

function getHeight($image) {
	$sizes = getimagesize($image);
	$height = $sizes[1];
	return $height;
}

function getWidth($image) {
	$sizes = getimagesize($image);
	$width = $sizes[0];
	return $width;
}

$large_image_location = $upload_path.$large_image_name;
$thumb_image_location = $upload_path.$thumb_image_name;

if(!is_dir($upload_dir)){
	mkdir($upload_dir, 0777);
	chmod($upload_dir, 0777);
}

if (file_exists($large_image_location)){
	if(file_exists($thumb_image_location)){
		$thumb_photo_exists = "<img src=\"".$upload_path.$thumb_image_name."\" alt=\"Thumbnail Image\"/>";
	}else{
		$thumb_photo_exists = "";
	}
   	$large_photo_exists = "<img src=\"".$upload_path.$large_image_name."\" alt=\"Large Image\"/>";
} else {
   	$large_photo_exists = "";
	$thumb_photo_exists = "";
}

if (isset($_POST["upload"])) { 
	$userfile_name = $_FILES['image']['name'];
	$userfile_tmp = $_FILES['image']['tmp_name'];
	$userfile_size = $_FILES['image']['size'];
	$filename = basename($_FILES['image']['name']);
	$file_ext = substr($filename, strrpos($filename, '.') + 1);

if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {
	if (($file_ext!="jpg") || ($userfile_size > $max_file)) { // UPDATED ERROR CHECK
		$error= "tu imagen es demasiado grande, solo imagenes de menos de 3MB";
	}
}else{
	$error= "Select a jpeg image for upload";
}

if (strlen($error)==0){

	if (isset($_FILES['image']['name'])){

		move_uploaded_file($userfile_tmp, $large_image_location);
		chmod($large_image_location, 0777);

		$width = getWidth($large_image_location);
		$height = getHeight($large_image_location);

		if ($width > $max_width){
			$scale = $max_width/$width;
			$uploaded = resizeImage($large_image_location,$width,$height,$scale);
		}else{
			$scale = 1;
			$uploaded = resizeImage($large_image_location,$width,$height,$scale);
		}

		if (file_exists($thumb_image_location)) {
			unlink($thumb_image_location);
		}
	}

	header("location:".$_SERVER["PHP_SELF"]);
	exit();
}
}

if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
	$x1 = $_POST["x1"];
	$y1 = $_POST["y1"];
	$x2 = $_POST["x2"];
	$y2 = $_POST["y2"];
	$w = $_POST["w"];
	$h = $_POST["h"];
	$scale = $thumb_width/$w;
	$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
	header("location:".$_SERVER["PHP_SELF"]);
	exit();
}


if ($_GET['a']=="delete" && strlen($_GET['t'])>0){ 
	$large_image_location = $upload_path.$large_image_prefix.$_GET['t'].".jpg";
	$thumb_image_location = $upload_path.$thumb_image_prefix.$_GET['t'].".jpg";
	if (file_exists($large_image_location)) {
		unlink($large_image_location);
	}
	if (file_exists($thumb_image_location)) {
		unlink($thumb_image_location);
	}
	header("location:".$_SERVER["PHP_SELF"]);
	exit(); 
}
?>
<!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=iso-8859-1" />
	<script type="text/javascript" src="js/jquery-pack.js"></script>
	<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
</head>
<body>

<h1>Catalogo 4 patas</h1>
<?php
if(strlen($large_photo_exists)>0){
	$current_large_image_width = getWidth($large_image_location);
	$current_large_image_height = getHeight($large_image_location);?>
<script type="text/javascript">
function preview(img, selection) { 
	var scaleX = <?php echo $thumb_width;?> / selection.width; 
	var scaleY = <?php echo $thumb_height;?> / selection.height; 

$('#thumbnail + div > img').css({ 
	width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
	height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
	marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
	marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
} 

$(document).ready(function () { 
	$('#save_thumb').click(function() {
		var x1 = $('#x1').val();
		var y1 = $('#y1').val();
		var x2 = $('#x2').val();
		var y2 = $('#y2').val();
		var w = $('#w').val();
		var h = $('#h').val();
		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
			alert("You must make a selection first");
			return false;
		}else{
			return true;
		}
	});
}); 

$(window).load(function () { 
	$('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
});

</script>
<?php }?>
<h1>Registro de fotos</h1>
<?php
if(strlen($error)>0){
	echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
}
if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
	echo $large_photo_exists."&nbsp;".$thumb_photo_exists;
	echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete&t=".$_SESSION['random_key']."\">Delete images</a></p>";
	echo "<p><a href=\"".$_SERVER["PHP_SELF"]."\">Upload another</a></p>";

$_SESSION['random_key']= "";
}else{
		if(strlen($large_photo_exists)>0){?>
		<h2>Ajusta la imagen que sera usada en la vista de galeria, <BR> una vez que muestre el area deseada presiona "Listo!"</h2>
		<div align="center">
			<img src="<?php echo $upload_path.$large_image_name;?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="thumbnail" />
			<div style="float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
				<img src="<?php echo $upload_path.$large_image_name;?>" style="position: relative;" alt="Thumbnail Preview" />
			</div>
			<br style="clear:both;"/>
			<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
				<input type="hidden" name="x1" value="" id="x1" />
				<input type="hidden" name="y1" value="" id="y1" />
				<input type="hidden" name="x2" value="" id="x2" />
				<input type="hidden" name="y2" value="" id="y2" />
				<input type="hidden" name="w" value="" id="w" />
				<input type="hidden" name="h" value="" id="h" />
				<input type="submit" name="upload_thumbnail" value="Listo!" id="save_thumb" />
			</form>
		</div>
	<hr />
	<?php 	} ?>
	<h2>Para subir Imagen, haz click en "choose file" y selecciona la imagen deseada, <BR>debe aparecer el nombre al lado del boton, si es la correcta presiona "confirm"</h2>
	<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
	Imagen <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="confirm" />
	</form>
<?php } ?>
</body>
</html>

barand · Sep 28, 2012

The resize_thumbnail function is the one with x,y offsets. Perhaps if you call that instead of resize_image.

Felina · Sep 29, 2012

it just gave me a bunch of errors
Since there is a button to "save" the coordinates in the image I choose which should generate a resulting thumb,
could it be that it is somehow saving the "chosen image" without me clicking the button before I even
get the chance to move it around?

I tried with another script before with similar results, could it be a server issue? or something non-code related?

Felina · Sep 29, 2012

and when I said saving I mean getting stuck since it IS saving the re-sized image but not the thumbnail, not even if I click for it to save in the location is stuck... sorry for double post, didn't see an edit button

crop image problem, can't select area to crop

FFelina

Bbarand

FFelina

FFelina