Jump to content

crop picture Hello everyone, In fact, I have a script that makes the crop image


jacque99

Recommended Posts

Hello everyone,

In fact, I have a script that makes the crop image that works well, I'm stuck on the part of adding a text box to allow to name the image "thumb".

I also ask if possible to remove the "PHP_SELF" script and divide it into several pages.

Attached script

 

 

[attachment deleted by admin]

we can make :

 

Enter the name of 'thumb_image_name' in a text box:

 

<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">

Photo <input type="file" name="image" size="30" /> <br /><br />

 

Specify the name of 'thumb_image_name' <input type="text" name="thumb"><br /><br />

 

<input type="submit" name="upload" value="Upload" /><br /><br />

</form>

 

 

 

 

 

After

 

 

$thumb=$_POST['thumb'];

$thumb_image_name = $thumb.".jpg";

You aren't going to find many people willing to download a .zip file and open it. It would be better for you to just paste the code from each file inside of

 . . . 

BBCode tags.

Here is my script, just create a folder 'upload_pic' and test

 

 

<?php


//Constants
//You can alter these options
$upload_dir = "upload_pic"; 				// The directory for the images to be saved in
$upload_path = $upload_dir."/";				// The path to where the image will be saved
$large_image_name = "resized_pic.jpg"; 		// New name of the large image


//$thumb_image_name = "thumbnail_pic.jpg"; 	// New name of the thumbnail image


$thumb = $_POST["thumb"];

$thumb_image_name=$thumb.".jpg";



$max_file = "1148576"; 						// Approx 1MB
$max_width = "500";							// Max width allowed for the large image
$thumb_width = "100";						// Width of thumbnail image
$thumb_height = "100";						// Height of thumbnail image

//Image functions
//You do not need to alter these functions
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;
}
//You do not need to alter these functions
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;
}
//You do not need to alter these functions
function getHeight($image) {
$sizes = getimagesize($image);
$height = $sizes[1];
return $height;
}
//You do not need to alter these functions
function getWidth($image) {
$sizes = getimagesize($image);
$width = $sizes[0];
return $width;
}

//Image Locations
$large_image_location = $upload_path.$large_image_name;
$thumb_image_location = $upload_path.$thumb_image_name;

//Create the upload directory with the right permissions if it doesn't exist
if(!is_dir($upload_dir)){
mkdir($upload_dir, 0777);
chmod($upload_dir, 0777);
}

//Check to see if any images with the same names already exist
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"])) { 
//Get the file information
$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);
//$thumb = $_POST["thumb"];




//Only process if the file is a JPG and below the allowed limit
if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {
	if (($file_ext!="jpg") && ($userfile_size > $max_file)) {
		$error= "ONLY jpeg images under 1MB are accepted for upload";
	}
}else{
	$error= "Select a jpeg image for upload";
}
//Everything is ok, so we can upload the image.
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);
		//Scale the image if it is greater than the width set above
		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);
		}
		//Delete the thumbnail file so the user can create a new one
		if (file_exists($thumb_image_location)) {
			unlink($thumb_image_location);
		}
	}

	//Refresh the page to show the new uploaded image
	header("location:".$_SERVER["PHP_SELF"]);
	exit();
}
}

if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
//Get the new coordinates to crop the image.
$x1 = $_POST["x1"];
$y1 = $_POST["y1"];
$x2 = $_POST["x2"];
$y2 = $_POST["y2"];
$w = $_POST["w"];
$h = $_POST["h"];
$thumb = $_POST["thumb"];
//Scale the image to the thumb_width set above
$scale = $thumb_width/$w;
$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
//Reload the page again to view the thumbnail
header("location:".$_SERVER["PHP_SELF"]);
exit();
}

if ($_GET['a']=="delete"){
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" />
<title>WebMotionUK - PHP & Jquery image upload & crop</title>
<script type="text/javascript" src="http://mestestes.eu/js/jquery-pack.js"></script>
<script type="text/javascript" src="http://mestestes.eu/js/jquery.imgareaselect-0.3.min.js"></script>
</head>
<body>


<?php
//Only display the javacript if an image has been uploaded
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:1', onSelectChange: preview }); 
});

</script>
<?php }?>
<h1>Photo Upload and Crop</h1>
<?php
//Display error message if there are any
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 "<p><strong>NOTE:</strong> If the thumbnail image looks the same as the previous one, just hit refresh a couple of times.</p>";
echo $large_photo_exists." ".$thumb_photo_exists;
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete\">Delete Images</a></p>";
}else{
	if(strlen($large_photo_exists)>0){?>
	<h2>Create Thumbnail</h2>
	<div align="center">
		<img src="<?php echo $upload_path.$large_image_name;?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create 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="hidden" name="thumb" value="" id="thumb" />

			<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
		</form>
	</div>
<hr />
<?php 	} ?>
<h2>Upload Photo</h2>
<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
Photo <input type="file" name="image" size="30" /> <br /><br />

Specify the name of 'thumb_image_name'   <input type="text" name="thumb"><br /><br />

<input type="submit" name="upload" value="Upload" /><br /><br />	   
</form>

<?php } ?>
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.