Image cropping tools/picture problem in a CMS

[Mr Chris]

Hi Guys,

 

I have a script which takes an image uploaded to my site and produces two scales versions using the GD Library:

 

1) A thumbmail pic at 100px wide x the constrained height which I place on my indexes

2) A main image pic at 200px wide x the constrained height which I place on my main story page

 

Now my problem is with my thumbnail.

 

I want the picture to always be a set size ie: 100px wide x 100px height, but depending on the original size of the image that will never be the case.

 

So my question is has anyone else had this problem? How have you solved it? And are there any kind of online php cropping tools I could build into my CMS to resolve this issue?

 

Many Thanks

 

Chris

[Mr P!nk]

I got this from an on-line tutorial  a while back, this lets you resize both height and width for thumbnail use using GD Library.

 

Or have i completely missed your point here?

 

 

 <?php
//define a maxim size for the uploaded images
define ("MAX_SIZE","100"); 
// define the width and height for the thumbnail
// note that these dimensions are considered the maximum dimension and are not fixed, 
// because we have to keep the image ratio intact or it will be deformed
define ("WIDTH","200"); 
define ("HEIGHT","200"); 

  // this is the function that will create the thumbnail image from the uploaded image
// the resize will be done considering the width and height defined, but without deforming the image
function make_thumb($img_name,$filename,$new_w,$new_h)
{
	//get image extension.
	$ext=getExtension($img_name);
	//creates the new image using the appropriate function from gd library
	if(!strcmp("jpg",$ext) || !strcmp("jpeg",$ext))
		$src_img=imagecreatefromjpeg($img_name);

  	if(!strcmp("png",$ext))
		$src_img=imagecreatefrompng($img_name);

	 	//gets the dimensions of the image
	$old_x=imageSX($src_img);
	$old_y=imageSY($src_img);

	 // next we will calculate the new dimensions for the thumbnail image
	// the next steps will be taken: 
	// 	1. calculate the ratio by dividing the old dimensions with the new ones
	//	2. if the ratio for the width is higher, the width will remain the one define in WIDTH variable
	//		and the height will be calculated so the image ratio will not change
	//	3. otherwise we will use the height ratio for the image
	// as a result, only one of the dimensions will be from the fixed ones
	$ratio1=$old_x/$new_w;
	$ratio2=$old_y/$new_h;
	if($ratio1>$ratio2)	{
		$thumb_w=$new_w;
		$thumb_h=$old_y/$ratio1;
	}
	else	{
		$thumb_h=$new_h;
		$thumb_w=$old_x/$ratio2;
	}

  	// we create a new image with the new dimensions
	$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);

	// resize the big image to the new created one
	imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y); 

	// output the created image to the file. Now we will have the thumbnail into the file named by $filename
	if(!strcmp("png",$ext))
		imagepng($dst_img,$filename); 
	else
		imagejpeg($dst_img,$filename); 

  	//destroys source and destination images. 
	imagedestroy($dst_img); 
	imagedestroy($src_img); 
}

// This function reads the extension of the file. 
// It is used to determine if the file is an image by checking the extension. 
function getExtension($str) {
         $i = strrpos($str,".");
         if (!$i) { return ""; }
         $l = strlen($str) - $i;
         $ext = substr($str,$i+1,$l);
         return $ext;
}
  // This variable is used as a flag. The value is initialized with 0 (meaning no error found) 
//and it will be changed to 1 if an error occurs. If the error occurs the file will not be uploaded.
$errors=0;
// checks if the form has been submitted
if(isset($_POST['Submit']))
{
//reads the name of the file the user submitted for uploading
	$image=$_FILES['image']['name'];
	// if it is not empty
	if ($image) 
	{
		// get the original name of the file from the clients machine
		$filename = stripslashes($_FILES['image']['name']);

		// get the extension of the file in a lower case format
	 	$extension = getExtension($filename);
		$extension = strtolower($extension);
		// if it is not a known extension, we will suppose it is an error, print an error message 
		//and will not upload the file, otherwise we continue
		if (($extension != "jpg")  && ($extension != "jpeg") && ($extension != "png"))	
		{
			echo '<h1>Unknown extension!</h1>';
			$errors=1;
		}
		else
		{
			// get the size of the image in bytes
			// $_FILES[\'image\'][\'tmp_name\'] is the temporary filename of the file in which 
		//the uploaded file was stored on the server
			$size=getimagesize($_FILES['image']['tmp_name']);
			$sizekb=filesize($_FILES['image']['tmp_name']);

			//compare the size with the maxim size we defined and print error if bigger
			if ($sizekb > MAX_SIZE*1024)
			{
				echo '<h1>You have exceeded the size limit!</h1>';
				$errors=1;
			}

  			//we will give an unique name, for example the time in unix time format
			$image_name=time().'.'.$extension;
			//the new name will be containing the full path where will be stored (images folder)
		 	$newname="images/".$image_name;
			$copied = copy($_FILES['image']['tmp_name'], $newname);
			//we verify if the image has been uploaded, and print error instead
			if (!$copied) 
			{
				echo '<h1>Copy unsuccessful!</h1>';
				$errors=1;
			}
			else
			{
				// the new thumbnail image will be placed in images/thumbs/ folder
				$thumb_name='images/thumbs/thumb_'.$image_name;
				// call the function that will create the thumbnail. The function will get as parameters 
				//the image name, the thumbnail name and the width and height desired for the thumbnail
				$thumb=make_thumb($newname,$thumb_name,WIDTH,HEIGHT);
			}}	}}

  //If no errors registred, print the success message and show the thumbnail image created
if(isset($_POST['Submit']) && !$errors) 
{
	echo "<h1>Thumbnail created Successfully!</h1>";
	echo '<img src="'.$thumb_name.'">';
} 

?>
</p>
<form name="newad" method="post" enctype="multipart/form-data"  action="">
<table>
	<tr><td><input type="file" name="image" ></td></tr>
	<tr><td><input name="Submit" type="submit" value="Upload image"></td></tr>
</table>	
</form>

 

hope it helps  :-\

 

P!nk

[jaymc]

If you force an image to be 100x100 it will distort it, unless the original images height is equal to the width, a square basically

 

Your best bet is to scale it down accordinly, where as if you reduce the height by 64% to make it equal 100px you reduce the width by 64%

 

That way your height will always be 100px but depending on the shape of the image the width will varey, although that will always be under 100px..

 

 

[Mr P!nk]

yea i had the problem with distortion with that script.

 

any ideas as to why php does this ?

 

as it dosent make much sense to me  :-\