Combine 2-3 transparent PNG images on top of each other with PHP

Question

I am working on a custom avatar system for a project, but I have never really done much with the image side of PHP. I assume I need to use GD in some way, but I have no idea where to even start.

Basically, there are a bunch of pre-made transparent PNG images. Users can select 2-3 of them to customize their avatar, and I want to be able to take these images and make a single image out of them to be stored in a folder.

Jonathan Patt · Accepted Answer · 2009-09-09T07:29:46.000

69

$image_1 = imagecreatefrompng('image_1.png');
$image_2 = imagecreatefrompng('image_2.png');
imagealphablending($image_1, true);
imagesavealpha($image_1, true);
imagecopy($image_1, $image_2, 0, 0, 0, 0, 100, 100);
imagepng($image_1, 'image_3.png');

edited Sep 09 '09 at 07:29

answered Sep 09 '09 at 04:50

Jonathan Patt

1,572
14
13

7

This is using GD, by the way. – Jonathan Patt Sep 09 '09 at 04:52
1

Well the thing is, I need the final image to be a transparent PNG as well. – James Simpson Sep 09 '09 at 05:22
I edited the above with two lines of code that allow the background, and final image, to be transparent as well. – Jonathan Patt Sep 09 '09 at 05:44
4

amazing that out of numerous similar topics at stackoverflow that suggest various combinations of `imagealphablending` and `imagesavealpha` before and after `imagecopy`, this is the one that works. :) – yitwail Oct 28 '13 at 15:51

score 7 · Answer 2 · answered Dec 15 '14 at 13:59

This helped me create a PNG image from 3 other PNG files to create a watermarked image with a background. Hope it helps someone else.

$bgFile = __DIR__ . "/background-layer-1.png"; // 93 x 93

$imageFile = __DIR__ . "/icon-layer-2.png"; // 76 x 76

$watermarkFile = __DIR__ . "/stars-layer-3.png"; // 133 x 133 (Is white stars)

<?php
// Download the image files if we don't have them
function get_file($file, $from) {
    if (!file_exists(__DIR__ . "/" . $file)) { file_put_contents(__DIR__ . "/" . $file, file_get_contents($from)); }
}
get_file("background-layer-1.png", "http://i.imgur.com/6pgf3WK.png");
get_file("icon-layer-2.png", "http://i.imgur.com/0sJt52z.png");
get_file("stars-layer-3.png", "http://i.imgur.com/1Tvlokk.png");

$bgFile = __DIR__ . "/background-layer-1.png"; // 93 x 93
$imageFile = __DIR__ . "/icon-layer-2.png"; // 76 x 76
$watermarkFile = __DIR__ . "/stars-layer-3.png"; // 133 x 133

// We want our final image to be 76x76 size
$x = $y = 76;

// dimensions of the final image
$final_img = imagecreatetruecolor($x, $y);

// Create our image resources from the files
$image_1 = imagecreatefrompng($bgFile);
$image_2 = imagecreatefrompng($imageFile);
$image_3 = imagecreatefrompng($watermarkFile);

// Enable blend mode and save full alpha channel
imagealphablending($final_img, true);
imagesavealpha($final_img, true);

// Copy our image onto our $final_img
imagecopy($final_img, $image_1, 0, 0, 0, 0, $x, $y);
imagecopy($final_img, $image_2, 0, 0, 0, 0, $x, $y);
imagecopy($final_img, $image_3, 0, 0, 0, 0, $x, $y);

ob_start();
imagepng($final_img);
$watermarkedImg = ob_get_contents(); // Capture the output
ob_end_clean(); // Clear the output buffer

header('Content-Type: image/png');
echo $watermarkedImg; // outputs: `http://i.imgur.com/f7UWKA8.png`

Outputs:

Result

score 6 · Answer 3 · answered Oct 17 '16 at 13:03

Also can be done in this way. Hope this will be useful for future visitors.

$base = imagecreatefrompng('your base image path');
//logo is transparent: in this case stackoverflow logo
$logo = imagecreatefrompng("path for image with transparent background");

//Adjust paramerters according to your image
imagecopymerge_alpha($base, $logo, 60, 60, 0, 0, 300, 200, 100);

header('Content-Type: image/png');
imagepng($base);

//@see: http://php.net/manual/en/function.imagecopymerge.php for below function in first comment
function imagecopymerge_alpha($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct){ 
        // creating a cut resource 
        $cut = imagecreatetruecolor($src_w, $src_h); 

        // copying relevant section from background to the cut resource 
        imagecopy($cut, $dst_im, 0, 0, $dst_x, $dst_y, $src_w, $src_h); 

        // copying relevant section from watermark to the cut resource 
        imagecopy($cut, $src_im, 0, 0, $src_x, $src_y, $src_w, $src_h); 

        // insert cut resource to destination image 
        imagecopymerge($dst_im, $cut, $dst_x, $dst_y, 0, 0, $src_w, $src_h, $pct); 
    }

Working Example: This is background Image
This is stackoverflow logo.

This is combined Result.

score 2 · Answer 4 · answered Sep 09 '09 at 12:46

Definitely using GD Library.

<?php

$final_img = imagecreate($x, $y); // where x and y are the dimensions of the final image

$image_1 = imagecreatefrompng('image_1.png');
$image_2 = imagecreatefrompng('image_2.png');
$image_3 = imagecreatefrompng('image_3.png');
imagecopy($image_1, $final_img, 0, 0, 0, 0, $x, $y);
imagecopy($image_2, $final_img, 0, 0, 0, 0, $x, $y);
imagecopy($image_3, $final_img, 0, 0, 0, 0, $x, $y);

imagealphablending($final_img, false);
imagesavealpha($final_img, true);
if($output_to_browser){

header('Content-Type: image/png');
imagepng($final_img);

}else{
// output to file

imagepng($final_img, 'final_img.png');

}

?>

This one didn't work for me. Are the imagecopy() variables in the right order? I think $final_img should be first, like @Anil 's answer below. — Martin Burch, Jul 28 '15 at 05:54

score 1 · Answer 5 · answered Sep 09 '09 at 03:30

1

What you want to use are the PHP ImageMagick utilities.

Specifically, the CombineImages command.

answered Sep 09 '09 at 03:30

Mike Buckbee

6,793
2
33
36

is there any example for combineImages ? – casper123 Jan 30 '14 at 13:11

Combine 2-3 transparent PNG images on top of each other with PHP

5 Answers5

Linked