PHP GD image merge changing my image to black

Question

I have a very frustrating situation. I am using PHP GD for the first time, and it's been a bit of a rollercoaster relationship. Basically, I am trying to merge 2 images, a square one (with a height/width of x) onto a rectangle (with a width of x and a height of y).

The square needs to be centered vertically. But this isn't the issue - I've managed to position it correctly.

Whats happening is, my rectangle is white. My square has a white background, so when the images are merged, it should just look like my asset on a white rectangluar background.

When I merge the image though, GD is for some reason changing my background white rectangle to black - so you can see the white square in the middle, with black "bars" on top and bottom. Can anyone help?

Code is:

//create copy of original image to correct size
imagecopyresized($dst_image, $src_image, 0,0,0,0,$x_width,$x_height,$orig_img_x_width,$orig_img_x_height);
imagejpeg($dst_image, "resized_copy.jpg", 100);

$img = imagecreatetruecolor(1333, 2000);
$white = imagecolorallocate($img, 255, 255, 255);
imagefill ( $img, 0, 0, $white );
imagefilledrectangle($img,0,0,1333,2000, $white);
imagejpeg($img, "rectangle.jpg", 100);

        //merge images
        $dest2 = imagecreatefromjpeg("rectangle.jpg");
        $src2 = imagecreatefromjpeg('resized_copy.jpg');

        imagecopymerge($dest2, $src2, 0, 0, 0, -333.5, $x_width, $x_height, 100);
        imagejpeg($dest2, "final_image.jpg", 100);

I've tried using imagecopy instead of imagecopymerge, but I get the same result. I'm sure there is a simple explanation, but I cant seem to find it trawling through the php manual.

In my somewhat limited experience, the GDLib doesn't act like a program such as PhotoShop where you can layer different sized images on top of each other and they all keep their sizes. The GDLib takes image A which may be 100px x 100px and allows you to drop it on top of image B which may be 200px x 200px, but it can only drop a 200px x 200px on top so it expands out image A's borders (with black) to match the larger size beneath. — Rasclatt
Ok, so what would you recommend to achieve this process, if anything? — AnthonyB
To be honest, I can't remember, but I messed around with all the alpha channel functions to try and assign that black area transparency. — Rasclatt

timclutton timclutton · Accepted Answer · 2014-08-27T08:35:02

I've read your question a few times but I'm not convinced I understand exactly what you are trying to achieve so I've made a few assumptions in producing the below code.

For the sake of simplicity I've created a 'square.jpg' test image file like so:

square test image

(Note that I've used small image sizes here so I can show them inline.)

// read in the square test image.
$square    = imagecreatefromjpeg('square.jpg');
$square_x  = imagesx($square); // 100px
$square_y  = imagesy($square); // 100px
// create the rectangular image to merge with.
$rectangle = imagecreatetruecolor(100, 200);
$rectangle_x = imagesx($rectangle); // 100px
$rectangle_y = imagesy($rectangle); // 200px
// note that this isn't white, but rather a lovely shade of blue to better
// show the image on the white SO background!
$white = imagecolorallocate($rectangle, 128, 128, 255);
imagefill($rectangle, 0, 0, $white);
// merge the images.
imagecopymerge(
    $rectangle,
    $square,
    0,
    ($rectangle_y / 2) - ($square_y / 2), // to vertically centre the square.
    0,
    0,
    $square_x,
    $square_y,
    75 // Just to show the merge clearly; change back to 100 for your usage.
);

imagejpeg($rectangle, 'final_image.jpg', 100);

imagedestroy($rectangle);
imagedestroy($square);

This gives me the following image in final_image.jpg:

enter image description here

PHP GD image merge changing my image to black

1 Answers