Auto resizing images

hi folks,
i wanted to ask that i wanted to upload images on my server which uses php and i want that whoever open a screen the images fit that resolution.like 1024px shld fix on iPhone screen and vice versa. is it possible?

Well, there’s always the % sizing options in HTML…

Provided as is without warranty of any kind, MIT license… I wrote this nearly 5 years ago so it may need work.


class ImageHandler {
	protected $sourcePath = '';
	protected $image = null;
	protected $destination = null;
	protected $type = '';
	protected $currentHeight = 0;
	protected $currentWidth = 0;
	
	public function load( $file )
	{
		$this->sourcePath = $file;
	
		if(empty($type))
		{
			$type = strtolower(pathinfo($file, PATHINFO_EXTENSION));
		}
		
		$imageAttributes = getimagesize($this->sourcePath);
		$this->currentHeight = $imageAttributes[1];
		$this->currentWidth = $imageAttributes[0];
		
		switch ($imageAttributes['mime'])
		{
			case 'jpg':
			case 'jpeg':
			case 'image/jpeg':
				$this->type = 'jpeg';
				$this->image = @imagecreatefromjpeg($this->sourcePath);
			break;
			case 'png':
			case 'image/png':
				$this->type = 'png';
				$this->image = @imagecreatefrompng($this->sourcePath);
			break;
			case 'gif':
			case 'image/gif':
				$this->type = 'gif';
				$this->image = @imagecreatefromgif($this->sourcePath);
			break;
		}
		
		if (!$this->image)
		{
			throw new Exception('PHP was unable to load Image');
		}
		
	}
	
	public function clear()
	{
		if (is_resource($this->image))
		{
			imagedestroy($this->image);
		}
		
		if (is_resource($this->destination))
		{
			imagedestroy($this->destination);
		}
		$this->sourcePath = '';
		$this->image = null;
		$this->destination = null;
		$this->type = '';
		$this->currentHeight = 0;
		$this->currentWidth = 0;	
	}
	
	public function resize( $targetHeight, $targetWidth, $trim = false, $secondPass = false )
	{
		if ( ($targetHeight && $targetWidth ) && 
			($targetHeight <= $this->currentHeight || $targetWidth <= $this->currentWidth) 
		)
		{
			$heightRatio = $targetHeight / $this->currentHeight;
			$widthRatio = $targetWidth / $this->currentWidth;

			## If we are trimming we want the short side to fit to match it's target.
			## If we aren't trimming we want the long side to fit to it's target.
			$ratio = ($this->currentHeight >= $this->currentWidth && !$trim ) ? $heightRatio : $widthRatio;
			
			$newHeight = floor( $this->currentHeight * $ratio );
			$newWidth = floor( $this->currentWidth * $ratio );
	
			if ($secondPass)
			{
				$this->destination = imagecreatetruecolor( $targetWidth, $targetHeight );			
			}
			else
			{
				$this->destination = imagecreatetruecolor( $newWidth, $newHeight );		
			}
			
			imagecopyresampled(
				$this->destination, 
				$this->image,
				0, 0, 0, 0, // Coordinate settings are unused by this class. 
				$newWidth,
				$newHeight, 
				$this->currentWidth, 
				$this->currentHeight
			);
			
			$this->image = $this->destination;
			$this->destination = null;
			$this->currentHeight = $newHeight;
			$this->currentWidth = $newWidth;
			
			if (!$secondPass && $trim && ( $newHeight > $targetHeight || $newWidth > $targetWidth ) )
			{
				$this->resize($targetHeight, $targetWidth, true, true );
			}
		}
	}
	
	public function save ( $path, $type = null, $compression = 100 )
	{
		if (empty($type))
		{
			$type = $this->type;
		}
		
		if (empty($compression))
		{
			$compression = 100;
		}
		
		switch ($type)
		{
			case 'jpg':
			case 'jpeg':
			case 'image/jpeg':
				imagejpeg($this->image, $path, $compression);
			break;
			case 'png':
			case 'image/png':
				imagepng($this->image, $path);
			break;
			case 'gif':
			case 'image/gif':
				imagegif($this->image, $path);
			break;
		}
	}
}

I m working on website of someone code. i wanna find out,where the image sizes are set before uploading. what should i look for?

Javascript doesn’t provide a means to check an image’s dimensions from a load dialog. PHP requires that the file be uploaded before it can do such detection. So, flatly, you can’t do that.

and your implying that?

I imply nothing. I am stating outright, you can not get the dimensions of an image without uploading it.

There are IE specific ActiveX controls (or something similar but I know little about them) that give you access to the local file system from which you might be able to view a file’s properties. But unless you know exactly what you are doing there are all sorts of security risks doing it this way and so I would not recommend do it this way.

As has already been mentioned, you really need to upload the image first after which you can get the image’s actual pixel width and height.

An option you could use, which would make it appear to the user the image dimensions are being displayed prior to uploading is:

1- put an onchange event handler on your <input type=“file” /> which uploads the file to the server into a temp area.

2- the event handler then polls the temp area at set intervals with an ajax request to check for the existance of the image file name. If it exists, then return the image’s pixel width and height from the appropriate php functions and display them in the browser. Then delete the temp image file.

All this can be done without a page refresh and the user will see the image’s dimensions displayed in the browser when they select an image file to upload.

An easier option could be to load the selected image file into a hidden <img> and then use the Image() javascript object to get the image’s width and height. This you can do locally without having to upload the image to the server.

Or maybe you can get the browser’s viewport dimensions and then size your images accordingly.

I have to crop the image using the following function


function resimk3($adi,$en,$yeniadi,$yeri) {
				
	$src = imagecreatefromjpeg($adi);
	
	list($width,$height) = getimagesize($adi);
	
	$newwidth = $en;
	$newheight = ($height/$width)*$en;
	
	$tmp = imagecreatetruecolor($newwidth,$newheight);
	imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
	
	$filename = $yeri.$yeniadi;
	imagejpeg($tmp,$filename,100);			
	
}