Como combinar archivos PNG conservando su transparencia, usando PHP y la librería GD

Hoy, aprenderemos a usar la librería GD para unir 3 o más archivos png en uno solo y preservar la transparencia.

Empezaremos con 3 archivos png que sean como los que vemos debajo, y lo que queremos lograr es una cuarta imagen que represente los 3 png iniciales, uno sobre otro, mientras se mantiene la trasparencia de cada uno.

La parte complicada de mezclar los archivos png es mantener la transparencia o niveles alfa intactos. Para hacer eso, necesitas saber que cuando se crea una recurso de imagen en PHP debes hacer que “recuerde” el estado alfa y llenar el nuevo recurso con una transparencia usando la función imagecolorallocatealpha().

Suficiente teoría…. Aquí está el código:

    
        <?php 
            //define the width and height of our images
            define("WIDTH", 200);
            define("HEIGHT", 200);

            $dest_image = imagecreatetruecolor(WIDTH, HEIGHT);

            //make sure the transparency information is saved
            imagesavealpha($dest_image, true);

            //create a fully transparent background (127 means fully transparent)
            $trans_background = imagecolorallocatealpha($dest_image, 0, 0, 0, 127);

            //fill the image with a transparent background
            imagefill($dest_image, 0, 0, $trans_background);

            //take create image resources out of the 3 pngs we want to merge into destination image
            $a = imagecreatefrompng('1.png');
            $b = imagecreatefrompng('2.png');
            $c = imagecreatefrompng('3.png');

            //copy each png file on top of the destination (result) png
            imagecopy($dest_image, $a, 0, 0, 0, 0, WIDTH, HEIGHT);
            imagecopy($dest_image, $b, 0, 0, 0, 0, WIDTH, HEIGHT);
            imagecopy($dest_image, $c, 0, 0, 0, 0, WIDTH, HEIGHT);

            //send the appropriate headers and output the image in the browser
            header('Content-Type: image/png');
            imagepng($dest_image);

            //destroy all the image resources to free up memory
            imagedestroy($a);
            imagedestroy($b);
            imagedestroy($c);
            imagedestroy($dest_image);
    ?>
    

La imagen que ves a la derecha es el resultado que deberías ver en tu explorador si todo salió bien con tu código. Ahora recapitulemos que has aprendido:

1. PHP no se limita a salidas HTML, usando su función de imágenes (librería GD), también puedes manipular/crear imágenes

2. Cuando creas archivos PNG con php debes recordar establecer los niveles correctos de transparencias. De otra manera, terminaras con un horrible fondo negro.

3. Cuando juegas con los recursos de imágenes en php, debes recordar siempre liberar memoria, destruyendo esos recursos de imágenes.