generare immagini con trasparenza in php

In alcuni casi c’è bisogno di generare immagini trasparenti o con zone in trasparenza per generare degli effetti particolari, tipo ombre o sovrapposizione di elementi grafici di sfondo o testuali.

Il formato PNG può contenere, oltre ai tre canonici canali RGB, un altro canale, detto alpha, che consente di specificare per ogni pixel il suo grado di trasparenza.

La trasparenza altro non è che la capacità di far passare quello che c’è “sotto” l’immagine.

L’ opacità è il contrario della trasparenza, un oggetto opaco non rivela nulla di ciò che ha sotto.
Opacità 0 = l’oggetto è trasparente, opacità 1 l’oggetto è completamente opaco, non rivela nulla che c’è sotto.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum velit et tellus. Quisque vel neque vel velit gravida semper. Nullam accumsan convallis nunc. Duis convallis tortor nec risus. Phasellus mi ante, rhoncus quis, vulputate nec, dignissim eget, velit. Morbi a mauris eu urna mattis accumsan. Mauris fringilla consectetur massa. Nullam laoreet ligula sit amet lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Phasellus ullamcorper pulvinar augue. Integer ac pede sed metus semper feugiat. Nullam imperdiet velit ac tellus.

Nell’esempio sopra si vede un’ immagine con zone più o meno opache che fanno trasparire il testo volutamente sovrapposto con il css.

Detto ciò vediamo come generare questo tipo di immagini con del codice php, usando le funzioni della libreria GD.

La ricetta è questa:

Come prima cosa si crea un’ immagine truecolor con la funzione imagecreatetruecolor.

...
$image=imagecreatetruecolor($sizeX, $sizeY);
...

La cosa importante è poi quella di definire il “blending mode” con la funzione imagealphablending e il modo di salvataggio del canale alpha con la funzione imagesavealpha.

...
imagealphablending($image, false);
imagesavealpha($image, true);
...

A questo punto se vogliamo disegnare qualcosa di più o meno opaco nell’immagine, definiremo il colore con la funzione imagecolorallocatealpha che ha 4 parametri, il valore delle intensità dei 3 colori, rosso, verde, blu e il valore della trasparenza, espresso come un numero intero compreso tra 0 e 127, dove 0 indica che il colore è completamente opaco, ovvero non traspare nulla di quello che c’è sotto, 127 che il colore è completamente trasparente, ovvero traspare completamente lo sfondo.

Esempio con questo codice si genera un rettangolo giallo con opacità variabile da 0 a 127


$sizeX = 300;
$sizeY = 100;
$image=imagecreatetruecolor($sizeX, $sizeY);

// Turn off alpha blending and set alpha flag

imagealphablending($image, false);
imagesavealpha($image, true);

for ($x=0;$x<$sizeX;$x++){
  $opacity = (int) (127.0/$sizeX * $x);
  $color = imagecolorallocatealpha($image, 255, 255, 0, $opacity);
  imageline  ( $image  , $x , 0  , $x  , $sizeY-1  , $color  );
}

header('Content-type: image/png');
imagepng($image);
imagedestroy($image);

E questo è il risultato (ci vuole un browser moderno e che supporti la trasparenza)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum velit et tellus. Quisque vel neque vel velit gravida semper. Nullam accumsan convallis nunc. Duis convallis tortor nec risus. Phasellus mi ante, rhoncus quis, vulputate nec, dignissim eget, velit. Morbi a mauris eu urna mattis accumsan. Mauris fringilla consectetur massa. Nullam laoreet ligula sit amet lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Phasellus ullamcorper pulvinar augue. Integer ac pede sed metus semper feugiat. Nullam imperdiet velit ac tellus.