SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2010
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize Landscape/Portrait Image

    Hi all, I've tried looking around the web for a solution but have so far failed. I want to enable a user to upload an image (which I have done) but if it's a landscape image then I want to resize the horizontal and automatically recalculate the height and if it's a portrait image then for it to resize the height and recalculate the width. Any ideas as to how this can be done?

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,407
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    Loads of posts in this section of the forum - try searching for resize, thumbnail etc.

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    The simplest way to achieve this is to use CSS background-size: contain. However, it is not supported by all browsers, so you will need to determine whether it is a viable solution for your circumstances. The other sacrifice that is necessary is using a div or span with a background image rather than an image tag. Though, it is really a small sacrifice to make considering the many advantages of using a background image resizing and centering easily.
    The only code I hate more than my own is everyone else's.

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2010
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there, I was hoping to do this while the user uploads their photo rather than taking the CSS route. I've also taken a look through the forums and haven't found anything of substance as yet.

  5. #5
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,407
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    There is one on this very page that does what you want started on 1 Nov: http://www.sitepoint.com/forums/show...s-the-best-way

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a script I wrote some time ago to resize images.

    Feel free to use it as is or tweak it to suit your needs.

    Code PHP:
    <?php
        /*************************************************************************
        This script resizes an image so that it fits within a user specified
        max_width and max_height.
     
        The script automatically detects jpg, png and gif image format files.
     
        Input Parameters:
        -----------------    
        pic         = path to image to be resized.
        maxWidth     = maximum width.
        maxHeight     = maximum height.
        *************************************************************************/
     
        //get the passed data, validate it and assign it to variables
     
        $image = $_GET['pic'];
     
        if(!isset($_GET['maxWidth'])        || !isset($_GET['maxHeight']) ||
           !is_numeric($_GET['maxWidth'])     || empty($_GET['maxWidth'])   || 
           !is_numeric($_GET['maxHeight']) || empty($_GET['maxHeight'])  || 
           $_GET['maxWidth']  <= 0 || 
           $_GET['maxHeight'] <= 0)
        {
            $max_width = 70;        //default value
            $max_height = 70;        //default value
        }
        else
        {
            $max_width  = $_GET['maxWidth'];
            $max_height = $_GET['maxHeight'];
        }
     
        //get the original image attributes
        $size         = GetImageSize($image);
        $width         = $size[0];
        $height     = $size[1];
        $imageType     = $size[2];
     
        //scaling factors
        $xRatio = $max_width / $width;        
        $yRatio = $max_height / $height;
     
        //calculate the new width and height
        if($width <= $max_width && $height <= $max_height)    //image does not need resizing
        {
            $toWidth     = $width;
            $toHeight     = $height;
        }
        else if($xRatio * $height < $max_height)
        {
            $toHeight = round($xRatio * $height);
            $toWidth  = $max_width;        
        }
        else
        {
            $toWidth = round($yRatio * $width);
            $toHeight  = $max_height;
        }
     
        //create the resized image
        //Type of image  1=GIF  2=JPG 3=PNG 4=SWF 5=PSD 6=BMP 7=TIFF(intel byte order) 8=TIFF(motorola byte order) 9=JPC 10=JP2 11=JPX 12=JB2 13=SWC 14=IFF 15=WBMP 16=XBM
     
        $newImage = ImageCreateTrueColor($toWidth,$toHeight);    //create the new image canvas
     
        switch ($imageType)
        {       
            case 1:        //gif file
                $oldImage = ImageCreateFromGif($image);
                break;
     
            case 3:        //png file
                $oldImage = ImageCreateFromPng($image);
                break; 
     
            default:    //jpg file
                $oldImage = ImageCreateFromJpeg($image);
                break;      
        }
     
        ImageCopyResampled($newImage,$oldImage,0,0,0,0,$toWidth,$toHeight,$width,$height);    //resize the new image
     
        //output the new resized image
     
        switch ($imageType)
        {       
            case 1:        //gif file
                header('Content-type: image/gif');
                ImageGif($newImage);
                break; 
                break;
     
            case 3:        //png file
                header('Content-type: image/png');
                ImagePng($newImage);
                break; 
     
            default:    //jpg file
                header('Content-type: image/jpeg');
                ImageJpeg($newImage);
                //ImageJpeg($newImage,'newImage.jpg', -1);
                break;      
        }
     
         //clean up resources
        ImageDestroy($oldImage);
        ImageDestroy($newImage);
     
    ?>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •