Moving an image to the bottom

Question

I am making avatars with PHP GD. There's annoying space between the avatar's feet, and the bottom of the image. I want to possibly get rid of that space by "pushing" the avatar down to the bottom (see below).

Here's the original image that I don't like, alongside the image I want to get:

enter image description here

Is there a method to this? Thanks. Below is the main part of the code being used for image generation.

$assets = array(
    "../assets/shirt/Default.png",
    "../assets/body/Default.png",
    "../assets/hair/Default.png",
    "../assets/eyes/Default.png",
    "../assets/eyebrows/Default.png",
    "../assets/mouth/Default.png",
    "../assets/pants/Default.png"
);

$baseImage = imagecreatefrompng($assets[0]);
imagealphablending($baseImage, true);
imagesavealpha($baseImage, true);

foreach($assets as $item) {
    $newImage = imagecreatefrompng($item);
    imagecopy($baseImage, $newImage, 0, 0, 0, 0, 350, 550);

    imagealphablending($baseImage, true);
    imagesavealpha($baseImage, true);
}

if($_GET['x']) {

    $sizex = $_GET['x']; if($sizex > 350) $sizex = 350;
    $sizey = $_GET['y']; if($sizey > 550) $sizey = 550;

    $png = imagecreatetruecolor($sizex, $sizey);
    imagesavealpha($png, true);

    $trans_colour = imagecolorallocatealpha($png, 0, 0, 0, 127);
    imagefill($png, 0, 0, $trans_colour);

    $blankImage = $png;
    imagealphablending($blankImage, true);
    imagesavealpha($blankImage, true);

    imagecopyresampled($blankImage, $baseImage, 0, 0, 0, 0, $sizex, $sizey, 350, 550);

    header("Content-type: image/png");
    imagepng($blankImage);
}
else {
    header("Content-type: image/png");
    imagepng($baseImage);
}

Note: The if($_GET['x']) { part of that code is to allow me to generate different sizes of the avatar on the spot. It works fine.

It's difficult to understand your question, but why not reduce the canvass height by on pixel? — Ben D, Mar 23 '13 at 15:17
Updated w/ pictures and better explanation. I am terrible at explaining things. Sorry. :( — Anonymous, Mar 23 '13 at 15:24
@BenD I cannot resize the image, and that is due to the fact that the user may add a set of shoes or something that would use up this space. — Anonymous, Mar 23 '13 at 15:28
please provide the images as well - perhaps a link to a zip - so that one can try the code. not that you waste your hard earned bounty. — hakre, Oct 01 '13 at 06:16

score 3 · Accepted Answer · edited May 23 '17 at 12:03

Here is the code to crop the bottom and move the cropped image to bottom.

<?php
example();
function example(){
    $img = imagecreatefrompng('https://i.stack.imgur.com/UUiMK.png');
    imagealphablending($img, true);
    imagesavealpha($img, true);

    // copy cropped portion
    $img2 = imageCropBottom($img);

    // output cropped image to the browser
    header('Content-Type: image/png');
    imagepng($img2);

    imagedestroy($img2);
}

function imageCropBottom($image) {
    $background1 = imagecolorat($image, 0, 0);
    $background2 = imagecolorat($image, 1, 1);

    $imageWidth = imageSX($image);
    $imageHeight = imageSY($image);
    $bottom = 0;

    for ($y = $imageHeight ; $y > 0 ; $y--) {
        for ($x = 0 ; $x < imagesx($image) ; $x++) {

            $imageColor = imagecolorat($image, $x, $y);
            if (($imageColor != $background1) && ($imageColor != $background2)) {
                $bottom = $y;
                break;
            }
        }
        if ($bottom > 0) break;
    }

    $bottom++;

    // create new image with padding
    $img = imagecreatetruecolor($imageWidth, $imageHeight);
    imagealphablending($img, true);
    imagesavealpha($img, true);

    $trans_colour = imagecolorallocatealpha($img, 0, 0, 0, 127);
    imagefill($img, 0, 0, $trans_colour);

    // copy
    imagecopy($img, $image, 1, $imageHeight-$bottom, 1, 1, $imageWidth-2, $bottom-1);

    // Draw a black rectangle
    $black = imagecolorallocate($img, 0, 0, 0);
    imagerectangle($img, 0, 0, $imageWidth-1, $imageHeight-1, $black);


    // destroy old image cursor
    imagedestroy($image);
    return $img;
}

References:

Josnidhin · Answer 2 · 2013-09-30T04:24:07.857

2

I think the solution is to build the avatar in a bottom-up fashion. i.e. shoe -> pant -> shirt -> face -> hair

(pseudo-code)

position = (x,y) // where y is the height of the canvas initially
if(need(shoe)){
  position = position - shoe.height
  add shoe at position
}
if(need(pant)) {
  position = position - pant.height
  add pant at position
}
... and so on

If you look at the imagecopy method it has the following method signature

bool imagecopy ( resource $dst_im , resource $src_im , int $dst_x , int $dst_y , int $src_x , int $src_y , int $src_w , int $src_h )

By varying $dst_x and $dst_y you could achieve what I have described.

edited Sep 30 '13 at 04:24

answered Sep 30 '13 at 03:55

Josnidhin

12,469
9
42
61

It's troubling though, because shoes can be of different heights. Any suggestions for that? – Anonymous Sep 30 '13 at 06:27
Use getimagesize() to find height dynamically or change the assets array into nested hash which has all the necessary parameters. – Josnidhin Sep 30 '13 at 09:44

Moving an image to the bottom

2 Answers2