www.webdeveloper.com
Results 1 to 7 of 7

Thread: Image resize with padding

  1. #1
    Join Date
    Oct 2007
    Posts
    371

    Image resize with padding

    I am accessing images from an API. The returned image is generally larger than I need, so I am using imagecreatetruecolor and imagecopyresampled to size it down as needed.
    (This is a modified version of a script I found somewhere on php.net)
    PHP Code:
    $filename='http://PATH_TO_API?'.$_SERVER['QUERY_STRING'];
    list(
    $imgwidth$imgheight) = getimagesize($filename);
    $source = @imagecreatefromjpeg($filename);
    $desired_size=$_GET['sz'];
    // a little control to the desired size.
    if(!is_numeric($desired_size)||$desired_size 600){$desired_size=600;}

    //resize large images
    if($imgwidth $desired_size || $imgheight $desired_size){
    if(
    $imgwidth $imgheight){$percent=$desired_size/$imgwidth;}else{$percent=$desired_size/$imgheight;}

    // Content type
    header('Content-type: image/jpeg');

    // Get new sizes
    $newwidth floor($imgwidth $percent);
    $newheight floor($imgheight $percent);
    // Load
    $thumb imagecreatetruecolor($newwidth$newheight);

    // Resize
    imagecopyresampled($thumb$source0000$newwidth$newheight$imgwidth$imgheight);

    // Output resized
    if($thumb){imagejpeg($thumb);}
    }else{
    // Output original size
    if($source){imagejpeg($source);}

    What I need is to make a white image that is desired_size by desired_size and then center my resampled image on top of it. This way all the images take up the same amount of space in my layout, without the added HTML code of divs or tables. My limited experience with GD functions leaves me a little stumped on exactly how to do it. I suspect it's simple, but I need a nudge in the right direction.
    Last edited by TecBrat; 02-04-2011 at 05:21 PM. Reason: Clarify what I am trying to achive

  2. #2
    Join Date
    Oct 2007
    Posts
    371
    I may have found the answer myself at
    http://php.net/manual/en/function.im...yresampled.php
    by arnar at netvistun dot is 16-Mar-2008 06:58

    I haven't tried it out yet though.

  3. #3
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,518
    Any reason you could not simply add a class to the img tag, then set the desired margin around the image in your CSS style sheet?
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  4. #4
    Join Date
    Oct 2007
    Posts
    371
    The images are not all the same size, so I need a dynamic solution, but that would have been simple and easy.

  5. #5
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,518
    I guess I was under the impression each image was being resized to the same size, but I guess if they are different and you are manipulating them anyway via GD, it probably doesn't matter, though it's likely you could use CSS centering techniques in any case, but probably nothing worth losing sleep over.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  6. #6
    Join Date
    Oct 2007
    Posts
    371
    I've learned to be open to suggestions, so let me make sure I'm clear as to what I have vs what I want. If I'm missing something, maybe you can open my eyes.

    I receive an image that already has a maximum height and maximum width. Some Images will be square, some images will be a rectangle that fits inside that square. I am finding the longer side of the rectangle, or a default side of a square, and resizing down to the size I want, using percentage to keep aspect ratio. The problem I have is that I still have some images that are tall and skinny and others that are short and fat. I want to keep my code as clean as possible, and not have to wrap each image in a div if I can avoid it, so If I can create a white image that is the square size I want, then v and h center the re-sized version on top of that white image, I'll be set. I'm going to try the code I mentioned earlier. If it works, I'll report back and mark this resolved. If you have a suggestion, I'm open to it. I know you give good answers.

  7. #7
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,518
    Any CSS solution I was thinking of would require some sort of wrapper div, probably around each image, unless you resized each image to the same height and let the width fall as it wanted to (or maybe cropped excess width).
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles