How to merge multiple images and text into single image?

Question

I have multiple PNG images inside a div, those images are PNG and presents as single image for user depending on custom options he/she has selected. Also, adding text is also enabled as other feature, which allows a div with texts to add above of those images.

Now i want to generate a image with those multiple images and text combined, maintaining the font-family & size of text.

For eg. the image that appears on interface with combination of images and text. (It's managed to appear with css positioning) Where as this is made of two images below and text

This is what i tried taking images : create-image.php file

<?php
createimageinstantly();
function createimageinstantly($img1='',$img2='',$img3=''){
    $x=$y=1000;
    header('Content-Type: image/png');
    $targetFolder = '/gw/media/uploads/processed/';
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

    $img1 = $targetPath.'img1.png';
    $img2 = $targetPath.'img2.png';
    $img3 = $targetPath.'img3.png';

    $outputImage = imagecreatetruecolor(1000, 1000);

    $first = imagecreatefrompng($img1);
    $second = imagecreatefrompng($img2);
    $third = imagecreatefrompng($img3);

    imagecopy($outputImage,$first,0,0,0,0, $x, $y);
    imagecopy($outputImage,$second,0,0,0,0, $x, $y);
    imagecopy($outputImage,$third,0,200,-200,0, $x, $y);

    imagepng($outputImage, $targetPath .round(microtime(true) * 1000).'.png');

    imagedestroy($outputImage);
 }
?>

But this gives me whole black colored image

Also, i need to mix with text on the finally generated image

edited :

• jpg images changed to png

• imagecopymege changed to imagecopy

Latest result :

       <?php
            createimageinstantly();
            //$targetFolder = '/gw/media/uploads/processed/';
            //$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
            //$img3 = $targetPath.'img3.png';
            //print_r(getimagesize('http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg'));
            function createimageinstantly($img1='',$img2='',$img3=''){
                $x=$y=600;
                header('Content-Type: image/png');
                $targetFolder = '/gw/media/uploads/processed/';
                $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

                $img1 = $targetPath.'img1.png';
                $img2 = $targetPath.'img2.png';
                $img3 = $targetPath.'img3.png';

                $outputImage = imagecreatetruecolor(600, 600);

                // set background to white
                $white = imagecolorallocate($outputImage, 255, 255, 255);
                imagefill($outputImage, 0, 0, $white);

                $first = imagecreatefrompng($img1);
                $second = imagecreatefrompng($img2);
                $third = imagecreatefrompng($img3);

                //imagecopyresized ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
                imagecopyresized($outputImage,$first,0,0,0,0, $x, $y,$x,$y);
                imagecopyresized($outputImage,$second,0,0,0,0, $x, $y,$x,$y);
                imagecopyresized($outputImage,$third,200,200,0,0, 100, 100, 204, 148);

                imagepng($outputImage, $targetPath .round(microtime(true)).'.png');

                imagedestroy($outputImage);
            }
        ?>

And the output image

Answer 1

And i achieved it this way,

Used these 3 images, img1.png,img2.png,img3.png

And create-image.php file

 <?php
        createimageinstantly();
        //$targetFolder = '/gw/media/uploads/processed/';
        //$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
        //$img3 = $targetPath.'img3.png';
        //print_r(getimagesize('http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg'));
        function createimageinstantly($img1='',$img2='',$img3=''){
            $x=$y=600;
            header('Content-Type: image/png');
            $targetFolder = '/gw/media/uploads/processed/';
            $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

            $img1 = $targetPath.'img1.png';
            $img2 = $targetPath.'img2.png';
            $img3 = $targetPath.'img3.png';

            $outputImage = imagecreatetruecolor(600, 600);

            // set background to white
            $white = imagecolorallocate($outputImage, 255, 255, 255);
            imagefill($outputImage, 0, 0, $white);

            $first = imagecreatefrompng($img1);
            $second = imagecreatefrompng($img2);
            $third = imagecreatefrompng($img3);

            //imagecopyresized ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
            imagecopyresized($outputImage,$first,0,0,0,0, $x, $y,$x,$y);
            imagecopyresized($outputImage,$second,0,0,0,0, $x, $y,$x,$y);
            imagecopyresized($outputImage,$third,200,200,0,0, 100, 100, 204, 148);

            // Add the text
            //imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text )
            //$white = imagecolorallocate($im, 255, 255, 255);
            $text = 'School Name Here';
            $font = 'OldeEnglish.ttf';
            imagettftext($outputImage, 32, 0, 150, 150, $white, $font, $text);

            $filename =$targetPath .round(microtime(true)).'.png';
            imagepng($outputImage, $filename);

            imagedestroy($outputImage);
        }
    ?>

And the result image is

Reference : imagecopyresized & imagettftext

thank you for the suggestions made via comments/answers. And also i blogged this in detail http://sumankc.com/2016/01/30/merge-multiple-images-and-text-to-create-single-image-php-gd-library/ Good day !!

Answer 2

First of all, jpeg images do not have alpha channel - it means that every pixel in the image has some color, without information about it's transparency. It could be difficult to create a workaround for this, but you could google it. If you can - I advise you to use PNG format, which holds transparency information.

Second of all - try reading the comments section in the PHP docs for imagecopymerge. This comment provides some useful information which you could use:

Sina Salek: I've just checked PHP's issue tracker and a core developer says that this function was never meant to support alpha channel! and they refused to commit the provided patch!

And afterwards the commenter provided an example that I think could work.