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." ".$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>
